动态div一个接一个地定位在下面

Question

图像，我想要实现的目标。

用户可以创建包含内容和项目的卡片。用户还可以评论项目和卡片本身。然后我需要的是显示如图片中的评论。 用plumb.js制作的连接线。 Div我可以用jQuery放置到右边

$('#c' + comment.id).position({ my: "left top", at: "right top", of: $('#'+comment.parent), collision: "none" });

在数据库中，我存储评论父元素ID。例如：“卡片项目1”ID是i95（i =项目，95是从db自动递增）。

问题：

• 我无法确定“用户对第2项的评论”CSS位置。
• 如果一个项目是两个或更多评论，那么我如何在评论后发表评论？ jQuery position（）属性碰撞没有帮助。 （评论彼此顶部）。 （这是最大的问题）
• 如果评论被评论，那么我需要在右侧发表评论。

我从服务器女巫获得的卡和评论是三个JS对象。 （一个是卡片，一个项目和评论）。首先我绘制卡片，然后是项目，然后是评论。在评论对象中，我有卡ID，父ID。在评论对象评论中没有任何顺序。

一个想法是使列表白衣安排评论顺序。我知道卡中列出的物品的顺序是什么。然后我可以遍历评论对象并检测当前卡的评论数量，然后查找：

1. 卡片评论
2. 卡评论评论
3. item no1 comments
4. 第1项评论意见
5. item no2 comments ,,,,依旧

然后将项目添加到DOM，计算每个评论高度，然后计算所有位置..

但也许有更好的方法来实现这一目标...... 我不在乎IE浏览器:)

服务器端是node.js，

Answer 1

答案就在这里。 http://jsfiddle.net/63es7/我无法在jsfiddle上添加jsplumb连接。我在div上添加了碰撞检测。不是一个很好的解决方案，但我正在努力：）