重写这个 jQuery 查找选择器？

Posted 2023-05-09

【中文标题】重写这个 jQuery 查找选择器？

【英文标题】：Rewrite this jQuery find selector?

【发布时间】：2012-04-20 11:43:38

【问题描述】：

我在 IE 中遇到性能问题并使用浏览器分析器，我将其缩小为：

$tbody.find('> tr:not(.t-grouping-row,.t-detail-row)')

这到底是什么意思以及关于如何重写它以使其在 IE 中表现更好的任何想法（如果有意义的话，可能是纯 javascript）？

【问题讨论】：

类似问题***.com/questions/4398771/… IE6-8 javascript 引擎真的很慢

如果你选择这样一个复杂的选择器，纯 JavaScript 不会给你太多优势。如果您可以控制标记，则可以为该元素提供一个 ID 并按 ID 选择（使用纯 JS 或 jQuery），这将具有性能优势。

【参考方案1】：

好的，让我们一起一步一步看看这意味着什么：

$tbody.find('> tr:not(.t-grouping-row,.t-detail-row)')

$tbody 是一个变量。它可能是在那之前定义的。我猜它的名字意思是“表格的 tbody 标记”。

> 的意思是“所有的孩子”。

tr:not(.t-grouping-row,.t-detail-row)' 表示“所有没有类“t-grouping-row”和“t-detail-row”的tr。

所以你的选择器是“在这个 tbody 中找到所有没有类“t-grouping-row”和“t-detail-row”的 TR。

更好的选择器如下：

$('tr:not(.t-grouping-row, .t-detail-row)', $tbody)

但这只会好一点，但仍然很糟糕。您应该查看您的 html，查看您想要的内容并使用更简单的选择器，例如 $('.class', $tbody)。

【讨论】：

这意味着与他当前的选择器不同。例如，您的选择器将遍历 $tbody 的整个树，而他的只有一层深。

要让你的方法起作用，那就是$('> tr:not(.t-grouping-row, .t-detail-row)', $tbody)，但我不确定这是否有效。

【参考方案2】：

我的回答是理论上的。

$tbody.children('tr').filter(function()
    var that = $(this);
    return (!that.hasClass('t-grouping-row') && !that.hasClass('t-detail-row');
)

.children 比.find 更有效，因为它需要查看的元素更少，此时嘶嘶声引擎停止（嘶嘶声看起来可能是您的问题）。 :not 被替换为 .filter，这将检查属性而不是选择。