帮我优化这个 jQuery:has 选择器答案

【问题标题】：Help me optimize this jQuery :has selector帮我优化这个 jQuery:has 选择器
【发布时间】：2010-10-19 00:37:02
【问题描述】：

我正在使用 dynaTrace 在 Internet Explorer 中分析我的应用程序。

最昂贵的调用之一如下：

$("div.containerClass:has(div.containerHeader)")

我对选择器的范围进行了如下调整，这提供了一些改进：

$("div.containerClass:has(div.containerHeader)", "#section-wrapper")

如何进一步提高性能？

注意：我不能更改 HTML 标记，只能更改 JavaScript。

我正在使用 jQuery 1.4.2。

UDPATE 这是示例 HTML...请注意，在我的实际应用程序中，HTML 是动态的，实际标记会有所不同：

<div id="section-wrapper">
    <div class="somethingelse">
        <div class="somethingelse2">
            <div class="containerClass"> 
            <div class="containerHeader"> 
              <h2>content region 1</h2> 
            </div> 
            </div> 

            <div class="containerClass"> 
            <div> 
              <h2>content region 2</h2> 
            </div> 
            </div> 

            <div class="containerClass"> 
            <div class="containerHeader"> 
              <h2>content region3 </h2> 
            </div> 
            </div> 

            <div class="containerClass"> 
            <div class="containerHeader"> 
              <h2>content region 4</h2> 
            </div> 
        </div> 
    </div>
</div>

【问题讨论】：

请向我们展示 HTML。

标签： javascript jquery performance internet-explorer

【解决方案1】：

您应该使用单个选择器，如下所示：

$("#section-wrapper div.containerClass:has(div.containerHeader)")

否则，您将启动多个 jQuery 对象只是为了执行查找。您必须进行测试，但根据您正在处理的 DOM，这可能会快得多（尤其是在 jQuery 1.4.3+ 中）：

$("#section-wrapper div.containerHeader").closest("div.containerClass")

【讨论】：

我是不是很困惑，或者你不能只做$('div.containerClass.containerHeader')...该元素不是有两个类吗？
@fudgey - :has() 表示它有一个具有该类的后代 :)
您的第一个示例与我的问题中的第二个示例具有几乎相同的性能。你的第二个例子对我不起作用....它在功能上等同于我的例子吗？
@frankadelic - 应该是，是的，虽然你的 ID 是 section-wrapper，而我在粘贴时截断了这个（在我的回答中只是 section-wrapp），但它不是固定的。
您的第二个示例不适用于我的 HTML，即使使用正确的 id 选择器。

【解决方案2】：

虽然如果这确实更快会很愚蠢，但您是否尝试过：

$("div.containerClass > div.containerHeader").parents('div.containerClass')

编辑时：添加了父选择器。

【讨论】：