哪个更有效：.parent（）。parent（）。parent（）〜或〜parents（“。foo”）〜或~etandy（“。foo”）

I have an A tag which triggers the animation of it's great-great-great-grandparent. All of the following will work, but which is most efficient, and why?

我有一个A标签，触发它的伟大的伟大祖父母的动画。以下所有方法都有效，但效率最高，为什么？

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

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

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

I suspect that the first might be, as it's the most explicit, but for maintenance reasons (the nesting may change) I prefer the second. They all appear to run smoothly in practice.

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

7 个解决方案

#1

Well closest is only useful if you are going up or at the same level on the 'clicked' element.

最近的只有在“clicked”元素上升或处于同一水平时才有用。

If for example you have to folowing scenario:

例如，如果您必须遵循以下情况：

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

Then closest('#otherone') will not find the hidden text field on $('.other-option').click() The better solution is in this scenario is to use $(this).parentsUntil('.radio-other').find('#otherone')

最近的（'#oneone'）将无法在$（'。other-option'）上找到隐藏的文本字段。单击（）在这种情况下更好的解决方案是使用$（this）.parentsUntil（'。radio-其他 '）。找到（' ＃otherone“）

Looking at my answer I made a jsperf here that reflects above scenario with different solutions. Just use what is the most usefull for your html scenario. the outcome is that parent().parent() is the fastest methode however this is not always a good option if your html is more flexible in use. Add a div parent and the parent().parent() breaks.

看看我的回答，我在这里制作了一个jsperf，它反映了上述场景的不同解决方案。只需使用对您的HTML场景最有用的内容。结果是parent（）。parent（）是最快的方法，但如果你的html使用起来更灵活，这并不总是一个好的选择。添加div父级，父级（）。parent（）中断。

#2

Here’s an analyzation:

这是一个分析：

parent() walks just one level up in the DOM tree.
parent（）只在DOM树中向上走一级。
parents(".foo") walks up to the root and selects only those elements that match the given selector .foo.
parent（“。foo”）遍历根目录并仅选择与给定选择器.foo匹配的那些元素。
closest(".foo") walks up to the root but stops once an element matches the selector .foo.
nearest（“。foo”）走向根，但一旦元素与选择器.foo匹配就停止。

So I would choose the last one, closest(".foo"). The reason:

所以我会选择最后一个，最接近（“。foo”）。原因：

It’s better than chaining parent, because if your document changes because you removed or added one hierarchy, you don’t need to change the jQuery code.
它比链接父级更好，因为如果因为删除或添加了一个层次结构而导致文档发生更改，则无需更改jQuery代码。
It’s better than parents(".foo"), because it stops as soon as a match has been found.
它比父母（“。foo”）更好，因为一旦找到匹配就会停止。

#3

It is a very good thing that you did performance measurements. That's exactly what should be done in such scenarios. If all appear to run smoothly in practice and you are satisfied with the performance pick the most readable one (second and third look ok).

你进行了性能测量是一件非常好的事情。这正是在这种情况下应该做的事情。如果所有这些都在练习中表现得很流畅并且您对性能感到满意则选择最具可读性（第二和第三个看起来没问题）。

#4

I think I saw a presentation of John Resig saying that closest() is more optimized, and it makes some sense. Closest() is a newer addition to jQuery and comes to solve exactly this ugly parent().parent() chain. On the other hand parents() returns an array of parents that match your foo class and is more greedy in terms of searching compared with closest() that finds the first element and stops searching.

我想我看到John Resig的一个演示文稿说，nearest（）更优化了，它有一定道理。 Closest（）是jQuery的新增功能，它可以解决这个丑陋的parent（）。parent（）链。另一方面，parents（）返回一个与你的foo类匹配的父类数组，并且在搜索方面比找到第一个元素并停止搜索的nearest（）更贪婪。

I would bet that closest() is the most efficient if you are looking for the closest match.

我敢打赌，如果你正在寻找最接近的匹配，那么最接近（）是最有效的。

#5

I can't comment on the realtive speed, however the first one ties you to an specific heirarchy of elements, which I would shy away from.

我无法对实际速度发表评论，但是第一个将你绑定到一个特定的元素层次，我会回避它。

Personally, I try to use class selectors sparingly anyway. I realise there is often no other way, but if I can factor in an ID selector then I know the performance is likely to improve anyway.

就个人而言，无论如何我都试图谨慎使用班级选择器。我意识到通常没有其他方法，但如果我能够考虑ID选择器，那么我知道无论如何性能都可能提高。

#6

You also can use parents('.foo:first'). I guess is pretty much the same as closest().

你也可以使用父母（'。foo：first'）。我猜与nearest（）几乎相同。

#7

A quick test in Firefox 3.6.3 reveals that parents('.foo').eq(0) is actually significantly faster than closest('.foo'). It's debatable whether it is as maintainable, but it might prove to be more 'efficient' in specific scenarios.

Firefox 3.6.3中的快速测试显示，父母（'。foo'）。eq（0）实际上明显快于最接近（'。foo'）。它是否可维护是有争议的，但在具体情况下可能会更加“有效”。

#1