Jquery遞歸地比較他們的HTML和屬性上的兩個元素

我試圖做一個智能的方式來從一個元素複製HTML到另一個。Jquery遞歸地比較他們的HTML和屬性上的兩個元素

比方說，我有以下。我想將結構從「.from」複製到「.to」。我可以使用.html（）複製批量，但這對於大型樹來說很慢，並且在瀏覽器重新繪製時會導致閃爍。

我想知道是否有人知道我可以遞歸地挖掘每個元素的樹並按元素比較元素的方式。因此，如果只有一個元素的HTML或屬性發生了變化，我只需要更改該元素 - 其他所有元素都保持不變。

在下面的例子中，「.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>

來源

2012-09-28 awidgery

Pfft，我會考慮你是否真的獲得了這樣做。在遍歷一棵潛在的大樹並對每個屬性進行比較時，它實際上是否更高效？ – Matt

我同意這看起來有點奇怪，但主要原因是當元素重新繪製時避免閃爍 - 因此想要這樣做。 – awidgery

如果您正在修改很多元素，那麼我不確定這是否會導致*少*視覺故障。如果你使用'.clone（）'元素，是否會導致閃爍？ – pimvdb

請看看我的解決方案：http://javascripts.svn.sourceforge.net/viewvc/javascripts/javascripts/js.prototype-extensions/js/extensions/element.js?view=markup - 從評論Smooth update of DOM subtree開始，這個代碼可以很容易地採用jQuery的。

簡而言之，函數updateSmoothly逐節點比較兩個DOM子樹（源和目標），嘗試保留現有節點並儘可能在源子樹上做最小的更改。在您的示例中，它將更改文本值，添加/刪除已存在的文本/元素節點的CSS類，並將僅附加一個LI列表。

該解決方案在生產環境中工作，即使在IE8中也能夠快速更新1300+行的表。

P.S.與另一個問題類似的答案：Updating gigantic HTML table with ajax

來源

2012-11-11 00:09:53 Victor

Jquery遞歸地比較他們的HTML和屬性上的兩個元素

回答

相關問題