Jquery递归比较两个元素的html和属性

Question

我正在尝试采用一种智能方式将 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>

Answer 1

请看我的解决方案:http://javascripts.svn.sourceforge.net/viewvc/javascripts/javascripts/js.prototype-extensions/js/extensions/element.js?view=markup - 从注释DOM子树的平滑更新开始，这段代码可以很容易地被jQuery采用。

简而言之，函数 updateSmoothly 逐个节点比较两个 DOM 子树(源和目标)，尝试保留现有节点并尽可能减少对源子树的更改。在您的示例中，它将更改文本值、添加/删除现有文本/元素节点的 CSS 类，以及仅将一个 LI 附加到列表中。

该解决方案在生产环境中运行，即使在 IE8 中也能足够快地更新具有 1300 多行的表。

附注另一个问题的类似答案:Updating gigantic HTML table with ajax