jquery - json データに基づいて dom 要素を並べ替える最良の方法

Question

jtemplates を使用して json データに基づいて dom 要素を作成したら、json データへの変更 (並べ替え、フィルタリングなど) に基づいてそれらの要素を並べ替える最良の方法は何ですか?

Answer 1

これを行う最もクリーンで簡単な方法は次のとおりです。

1）JSONオブジェクトのリストを並べ替え/並べ替えます2）DOMリストをクリアします（またはjTemplateによってはリストを削除します）。

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

3）次に、JSONオブジェクトでjTemplateを再実行して、リストを再入力します。

テンプレートエンジンを使用してリストをDOMにレンダリングするのは高速で、コードがはるかにクリーンになり、JSONオブジェクトを同等のDOMにマップするための複雑なロジックを必要としないことに注意してください。

Answer 2

したがって、これを解決するために現在使用している方法は、次のように、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 という属性を追加して、json 内の各アイテムに関連付けられている dom アイテムを追跡しました。このようにして、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 3

新しい要素を作成し、この要素に子要素を追加し、DOM に親要素を追加します。