1

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

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

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

单元格如下：

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>
4

3 回答 3

2

给这些元素一个类名。生成内容时。然后，您可以直接针对它们。

var contents = $('.className', cell);
于 2013-05-21T17:13:15.873 回答
1

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

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

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

— 消除不必要的选择器以获得：

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

查看性能改进。

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

我们可以通过构造查询来强制从左到右流动，以找到第一个事物，然后在结果集中搜索另一个事物：

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

查看性能改进。

最后， using:first-child比 using 快得多:first，并且有效形成的 TR 的第一个孩子总是第一个 TD，所以使用td:first-child而不是td:first：

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

查看性能改进。

在不更改 html 以通过为其指定类名或 id 来增加目标的特异性的情况下，这与您进行查询一样有效。

您可以测试此最终查询、问题中的原始查询以及其他答案中提供的查询之间的性能差异。

于 2013-05-21T17:21:55.883 回答
1

不需要您的大多数选择器

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

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

您也可以将循环更改为

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

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

于 2013-05-21T17:16:44.770 回答