如何使用jsPlumb遍历所有连接并在控制台输出起止节点？

嘿，别担心，刚上手jsPlumb的时候确实会有点摸不着头脑，我来帮你一步步搞定这个需求！

核心思路 #

jsPlumb提供了直接获取所有连接的API，你只需要调用它，然后遍历结果提取源（from）和目标（to）的信息就可以了。

具体实现步骤 #

1. 获取jsPlumb实例
   如果你是直接使用全局的jsPlumb对象，或者之前初始化过自定义实例，先拿到这个实例：

   // 全局使用的情况
   const plumbInstance = jsPlumb;
   // 或者自定义实例（推荐，尤其是复杂项目）
   // const plumbInstance = jsPlumb.getInstance({ /* 你的配置项，比如容器、端点样式等 */ });
   

2. 获取所有连接
   调用实例的getConnections()方法，它会返回一个包含所有当前连接的数组：

   const allConnections = plumbInstance.getConnections();
   

3. 遍历并输出连接信息
   遍历这个数组，每个连接对象里包含了sourceId/targetId（直接对应元素ID），或者你也可以通过from/to属性获取对应的DOM元素，再提取ID：

   allConnections.forEach(conn => {
     // 优先使用连接对象自带的sourceId和targetId，更直接
     const fromId = conn.sourceId || conn.from.id;
     const toId = conn.targetId || conn.to.id;
   
     // 输出到控制台
     console.log(`连接: 源元素ID [${fromId}] -> 目标元素ID [${toId}]`);
   
     // 如果你需要查看完整的连接对象细节，可以直接打印
     // console.log("完整连接对象:", conn);
   });
   

额外注意事项 #

• 确保这段代码是在jsPlumb初始化完成、所有连接已经创建之后执行的，比如放在页面的DOMContentLoaded事件回调里，或者某个按钮的点击事件中，避免获取到空数组。
• 如果你使用的是jsPlumb Toolkit版本（而非社区版），获取连接的方法是getCurrentConnections()，用法类似：

  const allConnections = toolkitInstance.getCurrentConnections();
  

内容的提问来源于stack exchange，提问作者Bruno C