jquery-动态更新列表定位

也许这更像是一个理论问题，而不是一个代码问题，但是底层解决方案将基于代码，所以我希望它适合这里

基本结构是我有一个无序的控件列表，根据发生的事情进行更新。信息通过[[url，text].[url2，text2]]arrays的JSON数据包传入，以构建在锚上：

$.each( controls, function( i, item ) {
        $("<li id=\"control_"+i+"_"+ID+"\"><a href=\""+item[0]+"\">"+item[1]+"</a></li>").appendTo("#ul_controls_"+ID);
});

是默认情况

按下“开始”时，“开始”和“编辑”将消失，而“停止”将进入

View
Stop

结束后，控件将再次更新，删除“停止”并返回“编辑”和“开始”选项

View
Start
Edit

正如您所看到的，我已经失去了原始状态的位置（视图现在位于顶部而不是底部，因为它持续存在并附加到，嗯，附加）

我过度简化了这个例子，因为循环中添加了许多其他不同阶段的控件

那么，我如何保持开始/停止交易的位置，编辑来来去去去都随心所欲，视图停留在最后（记住，根据状态，我在这个列表中还有5-10个控件，所以仅附加到这1个元素可能是不可靠的）

我的一些想法是：

始终将所有控件物理地放入DOM中，并切换可见性

发送完整的

$（“#ul”）.html（“
…到last
”），而不是JSON url/名称对每次从服务器为整个bock注入样式，而不是根据需要附加和分离单个li元素（性能问题？JSON格式问题？）

想出一个可以排序的ID方案，或者一个类似插槽的解决方案，但是这个方法在我的脑子里是空白的

---

我非常感谢您对此提出的任何想法或建议。

切换可见性

除非您有很多需要隐藏的元素，否则这通常效果很好。就性能而言，20个隐藏元素不是问题，应用程序可能会感觉更灵敏，因为您不需要查询服务器来获得标记更改。如果有许多相同的对象，每个对象都有相同的20个元素，那么这是错误的方法。如果是这种情况，请参阅JS对象部分

不过，这样做的逻辑可能并不适合你的应用程序。在JS中，隐藏内容的所有规则都需要是客户端的。由于这些列表项是链接，我假设您已经将这种逻辑放在了服务器端

发送每个JSON请求的完整列表

这很好地整合了服务器端的所有功能，但我不推荐它，除非列表很少更新

排序方案

这里有很多选择。我推荐这样的东西

当您定义项目列表（服务器端）时，为每个项目赋予一个order属性，这样，如果所有项目都可见，那么每个项目都有一个唯一的位置

ie:

item={href:“…”，文本：“…”，顺序：1}

然后在发送项目的同时发送该属性，并将其用作

的

val

属性（或其他）。然后使用类似于问题的任何答案（或使用排序插件）进行排序

JS对象

这将是我的方法（但我有偏见）。我保留服务器端代码用于基本数据检索和安全检查

使用您喜欢的任何模式使每个控制框成为JS“对象”。在页面加载时或需要使用完整的项目列表时初始化控制框对象。每个对象处理自己的服务器请求（仅数据，无标记），重新排序（或重画）自身，并通过其链接保持活动状态。排序是通过上述排序方案或将其构建到重画逻辑中来完成的。或者通过切换可见性

或者是徒劳的东西。我真的不能说得更具体了，因为它涉及到细节。虽然这是较重的客户端操作，但它将所有dom操作逻辑放在一个地方，需要较少的服务器请求，并且不太难保持轻量级

---

如果您想要一些特定的代码示例，请告诉我。这个问题相当宽泛，因此，我的回答也是如此

编辑

小提琴：

---

显示了一个只向DOM中插入缺少的值的基本算法（避免删除和重复插入）。它的编码不是很好，需要进行错误检查，但它可以工作，我想它比重建每次更新都要快。不过，我不相信重建一开始会有多大影响。

通过JSON数据包发送列表项的原因是什么？列表项是否依赖于某种类型的DB查询，或者是否有可能在加载时知道所有可能的项（页面或锚）？由于系统的大小，以及用户希望看到所有内容，所以在加载时只加载基本内容。选择要与之交互的特定行项目后，子菜单$.clones（）将创建html模板，将其附加到dom，然后查询缓存以使用该行项目的信息填充该模板。单击“开始”后，该数据馈送将成为实时数据，并以半实时的方式更新前端。可能性不是无穷无尽的，但有很多。考虑到我上面的选项1，引入20个元素，隐藏其中17个元素似乎是落后的，所以您使用的是服务器端方法。对于这类事情，我的方法通常更倾向于客户，但这更多是一个偏好问题。我会写一个答案。谢谢你的时间。期待回应。明白了。。。正如我所料，这确实有点模糊。当前设置类似于您描述的JS对象方法。当前的世界秩序是让一切都能得到自己的信息。ajax请求的数量刚刚开始增加并导致负载，因此现在的想法是将其打包到一个大的JSON分组中，然后DOM将其分发到元素中。不过，我还是

View
Start
Edit