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

jquery, jquery-selectors

Solution

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.

Problem

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.

Original source