在jQuery中遍历最有效的方法是什么

Question

当一个内部嵌套按钮被点击时，我正试图关闭一个父容器。在我的UI中--我有许多这样的父容器(我在产品类别页面上呈现我的产品目录的预览窗口)。

正如您从下面的标记中看到的-- CLOSE按钮深深地嵌套在DOM中。当用户单击CLOSE Button --我需要隐藏()父Box-1。请记住，我可能有多达100个产品显示在一个页面(100盒“盒子-1”的时间)。

我的标记如下所示：

<div class="box-1">
  <div class="box-2">
    <div class="box-3">...</div> <!-- end box-3 -->

    <div class="box-4">
      <div class="box-5">...</div> <!-- end box-5 -->
        <a class="btn-close" href="#">CLOSE</a>  <!-- this triggers the close event -->
    </div> <!-- end box-4 -->
  </div> <!-- end box-2 -->

  <div class="box-6">
    <div class="box-7">...</div> <!-- end box-7 -->

    <div class="box-8">
      ...
      <div class="box-9">...</div> <!-- end box-9 -->
    </div> <!-- end box-8 -->
  </div> <!-- end box-6 -->
</div> <!-- end box-1 -->

我的问题是--我如何最好地(也是最有效地)遍历DOM以获取"box-1“并发出.hide()方法……这是我现有的代码。

<script>
$productsResultItems.delegate('.btn-close', 'click', function (e) {
    //box-1
    $(this).parents('div.box-1').hide(); // <-- is this the best way?????
    e.preventDefault();
</script>

一开始，我试着这样--

$this.parents().find('.hover-box-large').hide();

这在IE7和IE8中被证明是非常慢的。

我发现在选择器中添加更多细节可以将IE7的性能提高近100倍，但在IE8中仅快4倍:( IE8仍然需要大约200ms来关闭父容器。现在所有其他浏览器(Chrome、Safari、Firefox和IE7)在不到20ms的时间内关闭容器。

$this.parents('div.hover-box-large').hide();

但是有没有更好的选择器方法呢？有什么特别的原因让IE8如此不擅长这种向上遍历吗？

Answer 1

最好的方法是closest，它可以找到与选择器匹配的最接近的祖先元素：

$this.closest('div.box-1').hide();

Answer 2

实际上，.closest()应该比.parents()更快。

在jQuery Docs on .closest()中，您可以找到：

.closest()

• 从当前元素开始
• 遍历DOM树，直到找到所提供的选择器的匹配项
• 返回的jQuery对象包含零个或一个元素

.parents()

• 从父element
• Travels开始，沿着DOM树向上移动到文档的根元素，将每个祖先元素添加到一个临时集合中；然后，如果提供了选择器，它将根据选择器过滤该集合。
• 返回的jQuery对象包含0个、1个或多个元素

因此，在您的示例中，.closest()将是最合适的，因为您需要找到一个元素，即与您的选择器匹配的最接近的祖先。parents()会过滤掉所有可能的祖先元素，即使它已经找到了你需要的那个。

Answer 3

parents()和closest()之间的唯一区别是，一旦找到匹配的元素，closest()就会停止，因此总是返回0或1个元素。Parents()将匹配DOM中的所有内容。

$(this).closest('.box-1').hide();