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

What is the most efficient way to traverse up in jQuery

本文关键字：遍历 方式 是什么 有效 jQuery      更新时间：2023-09-26

单击内部嵌套按钮时，我正试图关闭父容器。在我的UI中——我有很多这样的父容器（我在产品类别页面上呈现产品目录的预览窗口）。

正如您从我下面的标记中看到的那样——CLOSE按钮深深地嵌套在DOM中。当用户点击关闭按钮时，我需要隐藏（）父Box-1。请记住，我一次最多可以在一个页面上显示100个产品（100盒"Box-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仍然需要大约200毫秒才能关闭父容器。而现在所有其他浏览器（Chrome、Safari、Firefox和IE7）都在不到20毫秒的时间内关闭容器。

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

但是，有没有更好的选择器方法呢？IE8在这种类型的向上遍历方面太糟糕了，有什么特别的原因吗？？

使用的最佳方法是closest，它查找与选择器匹配的最近祖先元素：

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

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

在.closest()上的jQuery文档中，您可以找到：

.closest（）

  • 从当前元素开始
  • 在DOM树中向上移动，直到找到与提供的选择器匹配的项
  • 返回的jQuery对象包含零个或一个元素

.Pparents（）

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

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

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

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

没那么快！closest()可能是最好的，但并不总是！以下是你自己发现的方法。使用Firebug time（）和timeEnd（）函数来实际记录您的调用。然后选择适合这种情况的。

// 59ms
console.time("Parent x 3");
$container = $element.parent().parent().parent();
console.timeEnd("Parent x 3");
// 3ms              
console.time("Closest parent");
$container = $element.closest('.some-class').parent();
console.timeEnd("Closest parent");
// 2ms              
console.time("Parents");
$container = $element.parents('.other-class').eq(1);
console.timeEnd("Parents");
相关文章：