2

ある要素から別の要素にHTMLをコピーするインテリジェントな方法を作ろうとしています。

私が以下を持っているとしましょう。構造を「.from」から「.to」にコピーしたい。.html（）を使用して卸売りをコピーできますが、これは大きなツリーの場合は遅く、ブラウザーの再描画時にちらつきが発生します。

各要素のツリーを再帰的に掘り下げて要素ごとに比較する方法を誰かが知っているだろうかと思います。したがって、1つの要素のHTMLまたは属性のみが変更された場合、その1つの要素を変更するだけで済みます。他のすべては同じままです。

以下の例では、「。a」の属性は変更されていませんが、HTMLが変更されています。「.b」はその子を掘り下げて、「。x」の属性とHTMLを変更する必要があります。「.e」はターゲット要素に作成する必要があります。

誰かがこれを行うためのインテリジェントな方法を知っていますか？

<ul class="to">
    <li class="a">test1</li>
    <li class="b">
         <div class="x">test2</div>
    </li>
    <li>test3</li>
    <li class="c">test4</li>
</ul>

<ul class="from">
    <li class="a">test5</li>
    <li class="b">
         <div class="y">test6</div>
    </li>
    <li class="c">test7</li>
    <li class="d">test4</li>
    <li class="e">test</li>
</ul>
4

1 に答える 1

1

私の解決策を見てください: http://javascripts.svn.sourceforge.net/viewvc/javascripts/javascripts/js.prototype-extensions/js/extensions/element.js?view=markup - コメントから始めてSmooth update of DOM subtree、このコードはjQueryに簡単に採用できます。

簡単に言えば、関数はupdateSmoothly2 つの DOM サブツリー (ソースと宛先) をノードごとに比較し、既存のノードを維持し、ソース サブツリーの変更を最小限に抑えようとします。あなたの例では、テキスト値を変更し、既存のテキスト/要素ノードの CSS クラスを追加/削除LIし、リストに 1 つだけ追加します。

このソリューションは実稼働環境で機能しており、1300 行以上のテーブルを IE8 でも十分高速に更新しています。

PS 別の質問に対する同様の回答: ajax を使用して巨大な HTML テーブルを更新する

于 2012-11-11T00:09:53.700 に答える