Parent()，更快的选择？答案

【问题标题】：Parent(), faster alternative?Parent()，更快的选择？
【发布时间】：2012-01-09 13:46:38
【问题描述】：

我正在使用一个 div 仪表板，每个 div 都有一个按钮所在的树。每次我必须知道那个 div 的 id 是什么，所以我经常使用 parent()。

我主要是在 $(this).parent().parent().parent() 查找 div 的 ID，以便为它设置变量。该应用基于每个 div 的 id。

是否认为 parent() 最多使用 3 次但几乎在每个函数上都慢？

还有其他选择吗？

我正在寻找类似基准样式的东西，它可以显示更快的内容。

这是树的一个例子：

<div id="6179827893" class="dashdiv">
   <div class="buttons">
     <li><a href="#" class="btn1">Button 1</a></li>
     <li><a href="#" class="btn2">Button 2</a></li>
     <li><a href="#" class="btn3">Button 3</a></li>
     <li><a href="#" class="btn4">Button 4</a></li>
     <li><a href="#" class="btn5">Button 5</a></li>
     <li><a href="#" class="btn6">Button 6</a></li>
   </div>
   <div class="dashcontent">

    ....

   </div>
</div>

【问题讨论】：

也许 :contains 选择器是一个解决方案。 api.jquery.com/contains-selector
你知道父类的 CSS 类名吗？

标签： jquery html tree parent

【解决方案1】：

你有几个选项可以达到同样的效果。

基准：http://jsperf.com/parents-method。根据这个基准，我的方法比你的方法快大约 100 倍。

Method (see below) : Operations per second (higher is better)
parentNode3x       : 4447k
$(parentNode3x)    :  204K
$().closest        :   35k
$().parents        :    9k
$().parent()3x     :   44k

// Likely the fastest way, because no overhead of jQuery is involved.
var id = this.parentNode.parentNode.parentNode.id;

// Alternative methods to select the 3rd parent:
$(this.parentNode.parentNode.parentNode) // Native DOM, wrapped in jQuery

// Slowpokes
$(this).closest('.dashdiv')              // Hmm.
$(this).parents('.dashdiv:first')        // Hmm...

【讨论】：

你的第二个选项比我的更快吗？我想 parentNode 的意思是 parent()
感谢您和基准测试。差不多就是我要找的东西
如您所见，原生 DOM/JavaScript 始终与 jQuery 一样快/快。除非遇到跨浏览器问题，否则用纯 JavaScript 编写代码效率更高，尤其是在多次调用代码时，例如在间隔、循环或频繁发生的事件中。
@RobW 不要说“更好”，要说“更有效率”。 “更好”是相对的。如果我是第二个开发人员，正在查看该用户的代码，并且看到上面到处都是 node.parentNode.parentNode.parentNode.id，而没有很好的评论解释原因，我会低声对他发誓并立即开始重写。
只是基于此更改了一堆代码。谢谢罗伯。

【解决方案2】：

使用.closest() 可能会更好，例如：$(this).closest('.dashdiv')

从引擎的角度来看，它并没有更快，因为您仍在循环遍历 DOM 层，但对于新手来说更清楚，代码也更短。

如果你追求的是纯粹的速度，你不妨完全跳过 jQuery 并改用node.parentNode。但这涉及到计算周期的琐碎问题，我认为这是一个学术问题。

如果您正在为大型产品（如商业搜索引擎或网络邮件提供商）编写高性能代码，那么计算周期很重要，因为任何小的优化都会成倍增加数千次。恕我直言，我怀疑你正在编写那种代码。

如果您编写的内容最多一次会被几个人击中，那么小的优化是一种智力练习，不会以任何明显的方式影响结果。在任何用户开始注意到之前，您必须将代码的效率提高数百毫秒，而这段代码不会这样做。

相反，考虑下一个将查看您的代码的开发人员更为重要。对于该开发人员而言，拥有清晰、编写良好的代码以立即传达其正在执行的操作非常重要。像parent().parent().parent() 这样的方法链让人眼花缭乱，可能会使其他开发人员感到困惑和困惑，更不用说node.parentNode.parentNode.parentNode

——这就是为什么首先创建.closest()。它清晰、简洁，并且没有明显低于它所取代的链的效率。千分之九百九十九，这是你应该走的路。

【讨论】：

最接近的不被认为更快。 jQuery 必须寻找更接近父母没有的地方
是的，这是我的想法。但我认为为了换取更清晰、更简洁的代码，需要做出一点牺牲。如果你追求的是纯粹的速度，你不妨完全跳过 jQuery 并改用node.parentNode。
谢谢。很好回答。选择 Rob 的答案作为我将使用的内容和基准

【解决方案3】：

首先，不要过早优化。如果它没有引起问题（并通过各种平台进行彻底的测试），那么不要担心。

有一个可能的优化：使用原生 DOM 属性：

var id = this.parentNode.parentNode.parentNode.id;

请注意，最好的 jQuery 方法是使用 closest：

$(this).closest('div.dashdiv').prop('id');

【讨论】：

我知道最接近但它可能是最慢的，并且随着应用程序变得越来越大，这将是一个痛苦。我想正如 Rob W 所说，parentNode 会更快，对吧？
@jQuerybeast 是：it's what jQuery uses internally.
哈！链接上的不错。考虑到您的“不要过早优化”，我不确定是否应该将 parent() 与 parentNode 交换或保持原样
感谢您的回答。我将选择 Rob 的答案，因为它几乎相同，但他首先回答了

【解决方案4】：

如果处理程序当前位于 <a> 元素上，请将它们放在 .dashdiv 元素上。

如果e.target 是<a> 元素，那么您可以使用this.id。

$('.dashdiv').click(function(e) {
    if( e.target.nodeName.toLowerCase() === 'a' ) {
        alert( this.id );
    }
});

【讨论】：