Which is more efficient: .parent().parent().parent() ~or~ parents(".foo") ~or~ closest(".foo")

Question

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.

Answer 1

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.

Answer 2

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.