Question

我正在使用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>

Answer 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...

Answer 2

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

从引擎的角度来看，它并不是更快，因为你仍然在DOM层中循环，但是新手和更短的代码更清楚。

<强>评注

如果它是你所追求的纯粹速度，你可以完全跳过jQuery并使用node.parentNode代替。但是这已经进入了计算周期的琐碎问题，我认为这是一个学术问题。

如果您正在为主要制作（如商业搜索引擎或网络邮件提供商）编写高性能代码，那么计算周期很重要，因为任何小优化都会成倍增加数倍。尽管如此，我怀疑你是在编写那种代码。

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

相反，考虑将要查看代码的下一个开发人员更为重要。对于那个开发人员来说，拥有清晰，编写良好的代码非常重要，可以立即传达它正在做的事情。像parent().parent().parent()这样的模糊方法链可能会使其他开发人员模糊不清，更不用说node.parentNode.parentNode.parentNode

- 这就是为什么.closest()首先被创建的原因。它清晰，简洁，并不比它取代的链条效率低得多。千分之九千，这是你应该去的方式。

Answer 3

首先，不要过早优化。如果它没有引起问题（并通过一系列平台进行彻底测试），那么就不用担心了。

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

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

请注意，执行此操作的最好的jQuery方法（速度较慢，但可能不是问题）与closest一起使用：

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

Answer 4

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

如果this.id是e.target元素，则可以<a>。

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

家长（），更快的替代方案？

4 个答案: