jquery - 使用 jsPlumb 连接多个 dom 元素

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}]
});

这很好用，但我有很多元素要连接到页面上。

如何更改上面的代码，而不是单独执行每组连接，我有某种包含我的所有连接（源和目标）设置的数组，然后有一个循环来解析循环中的连接（源和目标）喜欢每个？

数据结构是这样的：

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

其中第一个 dom 元素是源，那么第二个是目标。可能还需要扩展它以指定位置。

任何想法都非常感激。

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))
    });           
}