Which is more efficient: .parent().parent().parent

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

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.

Answer 2

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.

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

Answer 4

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

Answer 5

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.

Answer 6

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.