Question

我有一个巨大的表格，每个td都生成了html。生成的html最终只是类.cellcontent的容器div中的另一个表。获取该表的第一个单元格内容的当前jquery太慢了。 撰写以下内容的更好/更快的方法是什么？

var contents = $(cell).find('.cellContent>table>tbody>tr>td:first :first-child');

这个jquery经常在一个非常大的表中为每个单元格执行，并且在页面上显示出显着的性能消耗。

Cell如下：

var mainTable = document.getElementById("gridID");
for (var colIndex = startIndex; colIndex <= mainTable.rows[0].cells.length; colIndex++) {
    for (var i = 1, row; row = mainTable.rows[i]; i++) {
        cell = row.cells[colIndex - 1];
    }
}

确切生成的单元格内容的html类似于以下内容：

<td class="staticCol prefItem">
    <div class="P_5_18_2013 cellContent">
        <table>
            <tbody>
                <tr>
                    <td>
                        <!--
                        ***HTML I want***
                        e.g., DIV or P or other markup
                        -->
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</td>

Answer 1

在生成内容时，为这些元素提供类名。。然后你可以直接定位它们。

var contents = $('.className', cell);

Answer 2

不需要大多数选择器

$(cell).find('.cellContent').find('td:first :first-child');

这会加速它，但它不太可能成为瓶颈。嵌套for循环比jquery选择器更容易导致性能问题。

你可以将循环改为

$(".gridID>tr>td:nth-child(1n+" + startindex).find('.cellContent').find('td:first :first-child');

注意：您在外部循环中迭代比最后一列更远。

Answer 3

可以对此搜索进行一些改进。我将逐步介绍它们并解释我正在做的事情，以便这个答案可以用于其他应用相同原则的人。

第一步是消除不必要的选择器。您不需要搜索作为TR孩子的TR，它是TBODY的子级，它是TABLE的子级（这是table>tbody>tr>td正在做的事情），因为它理解为有效的TABLE有那种结构。额外的选择器会大大增加您必须运行的操作数量。只需搜索第一个TD。而不是 -

$(cell).find('.cellContent>table>tbody>tr>td:first :first-child');

- 消除不必要的选择器：

$(cell).find('.cellContent td:first :first-child');

See the performance improvement

选择器从右到左阅读。在此查询中，不是将所有元素与类'cellContent'匹配，而是在该集合中搜索所有第一个TD，然后在该子集内搜索所有第一子元素，查询首先匹配页面上的所有第一个子元素，然后消除那些不是第一个TD的后代，然后消除那些不是具有类'cellContent'的元素的后代的那些。你可以想象，这是一项昂贵的操作！

我们可以通过构造查询来找到第一个东西，然后将结果集搜索到另一个东西，从左到右强制流程：

$(cell).find('.cellContent').find('td:first').find(':first-child');

See the performance improvement

最后，使用:first-child明显快于使用:first，并且有效形成的TR的第一个子节点将始终是第一个TD，因此请使用td:first-child代替{ {1}}：

td:first

See the performance improvement

在不改变html的情况下，通过为其提供类名或ID 来提高目标的特异性，这与您查询的效率一样高。

您可以在此最终查询，问题中的原始查询和其他答案中提供的查询之间test the difference in performance。

查找嵌套表格单元格内容 - jquery查询性能

3 个答案: