javascript - 帮我优化这个 jQuery :has selector

Question

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

最昂贵的调用之一如下:

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

我将选择器的范围限定如下，这提供了一点改进:

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

如何进一步提高性能？

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

我正在使用 jQuery 1.4.2。

更新这是示例 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>

Answer 1

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

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

否则，您将启动多个 jQuery 对象来执行查找。您必须进行测试，但是根据您所针对的 DOM，这可能会多更快(尤其是在 jQuery 1.4.3+ 中):

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