哪个更有效：.parent().parent().parent() ~或~ parents(".foo") ~或~最近(“.foo”)

Question

我有一个A标签触发了它的曾祖父的动画。以下所有内容都会有效，但哪一种最有效，为什么呢？

$(this).parent().parent().parent().parent().parent().animate(...);

$(this).parents(".foo").animate(...);

$(this).closest(".foo").animate(...);

我怀疑第一个可能是，因为它是最明确的，但出于维护的原因(嵌套可能改变)，我更喜欢第二个。在实践中，他们似乎都跑得很顺利。

Answer 1

好的，只有当你在“点击”元素上上升或处于同一水平时，最接近的元素才会有用。

例如，如果您必须折叠场景：

<div class="controls radio-other">
    <label class="radio"><input type="radio" name="item">Option one</label>
    <label class="radio"><input type="radio" name="item">Option two</label>
    <label class="radio"><input type="radio" name="item" class="other-option" data-othertarget="#otherone"> Other... </label>
    <input type="text" placeholder="Alternative answer" id="otherone" class="hidden">
</div>

然后closest('#otherone')将不会在$('.other-option').click()上找到隐藏的文本字段，更好的解决方案是在这个场景中使用$(this).parentsUntil('.radio-other').find('#otherone')

看看我的答案，我在这里做了一个杰斯普夫，它用不同的解决方案反映了上述场景。只需使用html场景中最有用的内容即可。其结果是，parent().parent()是最快的方法，但是如果您的html使用更加灵活，这并不总是一个好的选择。添加一个div父函数，parent().parent()就会中断。

Answer 2

下面是一个分析：

• parent()在DOM树中只走了一个层次。
• parents(".foo")走到根目录，只选择那些与给定的选择器.foo匹配的元素。
• closest(".foo")走到根目录，但一旦元素与选择器.foo匹配，就会停止。

所以我会选择最后一个，closest(".foo")。原因是：

• 它比链接parent更好，因为如果您的文档因为删除或添加了一个层次结构而发生更改，则不需要更改jQuery代码。
• 它比parents(".foo")更好，因为一旦找到匹配，它就会停止。

Answer 3

这是一件非常好的事情，你做了性能测量。这正是在这种情况下应该做的事情。如果在实践中所有这些看起来都运行得很顺利，并且您对性能感到满意，那么选择最易读的(第二和第三看可以)。