Question

HTML

<table>
    <tr data-parent="0" data-id="1">
        <td></td>
    </tr>
    <tr data-parent="1" data-id="2">
        <td></td>
    </tr>
    <tr data-parent="1" data-id="3">
        <td></td>
    </tr>
    <tr data-parent="3" data-id="4">
        <td></td>
    </tr>
</table>

data-parent指向另一行的data-id。

JQUERY / JS

$("tr[data-parent='" + id + "']").css("background-color", "#1ba1e2").each(function () {
    $("tr[data-parent='" + $(this).attr("data-id") + "']").css("background-color", "#75F7FF").each(function () {
        $("tr[data-parent='" + $(this).attr("data-id") + "']").css("background-color", "#98E8E3").each(function () {
            $("tr[data-parent='" + $(this).attr("data-id") + "']").css("background-color", "#B6DCE8")
    });});});

（我知道我本可以写一个递归函数，现在不是重点）

当有人将鼠标悬停在TR上时，我希望该行为一种颜色，所有将hovered行作为父级，另一种颜色，孙子级为另一种颜色等的行（对于多个级别深）。

现在，对于100行，这不是问题，但我的数据包含大约30 000行，并且它开始出错，几秒钟的冻结错误。< / p>

如何优化此代码？

为了您和我的方便：一个jsFiddle！ http://jsfiddle.net/dawdg4sj/

Answer 1

首先，单个表中的30,000行是可用性问题;有些浏览器甚至无法很好地处理这样的怪物。试着找到一种减小尺寸的方法。

现在有些解决方案。

您可以使用id代替data-id。浏览器为具有ID的元素保留了有效的查找表。在jQuery中，您可以使用$('#'+id)来查找非常快的DOM节点（如果您有30K行，则不扫描整个树，这将是巨大的。）

如果你不能这样做，那么将引用保存在一个JavaScript对象中，你可以通过简单的键查找来获得父/子，即lookup[parentId]应该返回带有parentId的TR节点。这意味着解析表一次或根本不使用data属性。

另一种方法是使用jQuery的data()函数，它允许您将任意值附加到DOM节点。这样，您可以查找相关节点的DOM节点并保留引用，而不是每次都搜索整个文档。

最后，每个级别的级别数和节点数对性能有很大影响。您的算法是O（N1 * N2 * N3 * N4 * ... * NM）（其中M是级别数）。因此，如果您有N2 = 5，N2 = 3，N3 = 4，那么您必须处理5 * 3 * 4 * ...节点。无论你如何进行查找，在一个巨大的文档中更改1000个节点都很昂贵。

性能：大表鼠标悬停效果

1 个答案: