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

Question

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

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

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

Answer 2

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

1）重新排序/排序您的 JSON 对象列表 2）清除 DOM 列表（或根据您的 jTemplate 删除列表），如下所示

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

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

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

Answer 3

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