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