Подключение нескольких элементов DOM с использованием jsPlumb

Question

Я использую jsPlumb для подключения Div элементов на странице, используя следующий код

var sourceDiv = $("#a"); 
var targetDiv1 = $("#b"); 
var targetDiv2 = $("#b"); 

jsPlumb.connect({ 
    source: sourceDiv, 
    target: targetDiv1, 
    anchors: ["BottomLeft", "TopCenter"], 
    paintStyle: { strokeStyle: "blue", lineWidth: 5 }, 
    connector: ["Flowchart", { minStubLength: 40}] 
}); 

jsPlumb.connect({ 
    source: sourceDiv, 
    target: targetDiv2, 
    anchors: ["BottomRight", "TopCenter"], 
    paintStyle: { strokeStyle: "blue", lineWidth: 5 }, 
    connector: ["Flowchart", { minStubLength: 40}] 
}); 

Это прекрасно работает, но у меня есть много элементов, чтобы соединить на одной странице.

Как я могу изменить приведенный выше код, так что вместо того, чтобы делать каждый набор подключений индивидуально, у меня есть какой-то массив, содержащий все настройки моего подключения (исходный и целевой), а затем цикл для синтаксического анализа соединений (источник и цель) в цикле, как a для каждого?

Нечто подобное для структуры данных:

var connections = new Array(); 
connection[0] = $('#a'), $('#b'); 
connection[1] = $('#a'), $('#b'); 
connection[2] = $('#b'), $('#c'); 
connection[3] = $('#c'), $('#d'); 

В случае, если первый элемент дом является источником, то второй является мишенью. Вероятно, нужно расширить это, чтобы указать положение.

Любые идеи с благодарностью получены.

Answer 1

Это должно работать:

var connections = new Array(); 
connections[0] = {src: "#a", tgt:"#b"}; 
connections[1] = {src: "#a", tgt:"#b"}; 
connections[2] = {src: "#b", tgt:"#c"}; 
connections[3] = {src: "#c", tgt:"#d"}; 
for(var index = 0; index < connections.length; index++) { 
    var con = jsPlumb.connect({ 
     source: $($("html").find(connections[index].src)), 
     target: $($("html").find(connections[index].tgt)) 
    });   
}