Which is more efficient: .parent().parent().parent() ~or~ parents(".foo") ~or~ closest(".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?

$(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.

Here’s an analyzation:

• parent() walks just one level up in the DOM tree.
• parents(".foo") walks up to the root and selects only those elements that match the given selector .foo.
• closest(".foo") walks up to the root but stops once an element matches the selector .foo.

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

• 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.
• It’s better than parents(".foo"), because it stops as soon as a match has been found.

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

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

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.

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

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.

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

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.

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

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.