基于 json 数据重新排序 dom 元素的最佳方法

Posted 2023-05-09

【中文标题】基于 json 数据重新排序 dom 元素的最佳方法

【英文标题】：Best way to reorder dom elements based on json data

【发布时间】：2011-01-15 19:18:30

【问题描述】：

一旦我使用 jtemplates 基于 json 数据创建 dom 元素，根据 json 数据的更改（排序、过滤等）重新排序这些元素的最佳方法是什么。

【问题讨论】：

+1 欢迎来到 Stack Overflow，@Ryan。

不能先把JSON的东西排序，再创建元素吗？

感谢@Jonathan。 @Pointy，是的，对 json 数据进行排序并使用 jtemplates 创建元素可以正常工作。但后记，在客户端，我希望能够对 json 数据进行排序和过滤，并通过移动和显示/隐藏它们来反映 dom 元素上的这些变化。

【参考方案1】：

所以我现在用来解决这个问题的方法是向我的每个模板化的 html 部分添加一个编号索引，如下所示：

<div id="list">
    <div id="items-start"></div>
    #foreach $T as item
    <div id="item-$T.item$index" class="item">
        ...lots of stuff...
    </div>
    #/for
</div>

然后在我的 json 项目中，我添加了一个名为 InitialIndex 的属性，以跟踪哪个 dom 项目与 json 中的每个项目相关联。这样，在我对我的 json 数据进行任何更改后，我可以调用这个简单的函数来将更改应用到 dom：

function applyListChanges(items) 
    $('.item').hide();
    for (var item in items) 
        var index = items[item].InitialIndex;
        $('#items-start').append($('#item-' + index));
        $('#item-' + index).show();
    

如果您有更好的解决方案，请告诉我。

【参考方案2】：

最干净和最简单的方法如下：

1) 重新排序/排序 JSON 对象列表 2) 清除 DOM 列表（或根据您的 jTemplate 删除列表），类似这样

$('#list').html('');

3) 然后通过在 JSON 对象上重新运行 jTemplate 来重新填充列表。

请记住，使用模板引擎将列表呈现到 DOM 速度很快，使您的代码更加简洁，并且不需要任何复杂的逻辑来将 JSON 对象映射到其等效的 DOM

【参考方案3】：

创建新元素，向该元素添加子元素，向 DOM 添加父元素。