jQuery - parent() vs closest()

Question

Say I have the following markup:

<div class="parent">
    <div class="child">
        <div class="grand-child">

And I want to get .parent starting from .grand-child . I can do either of the following two:

$('.grand-child').parent().parent();
$('.grand-child').closest('.parent');

Overall, closest() feels like a nicer approach since:

1. Only one function
2. It is irrelevant to other divs between the .grand-child and .parent

Specifically, due to advantage of #2 above, if I were to change my markup to

<div class="parent">
    <div class="child">
        <div class="nanny">
            <div class="grand-child">

Then I need to add an extra parent() but closest() still functions fine.

So is there a reason why you would ever choose parent() or closest() ?

Answer 1

you should use $('.grand-child').closest('.parent'); because .parent().parent() is strongly based on your html structure if in future you add another div inside one of these then you will get wrong element using parent().parent()

Suppose you have html like:

<div class="parent">
    <div class="child">
        <div class="grand-child-container">
             <div class="grand-child">

now what will happen if you use .parent().parent() it will give you wrong element, so recommended way is to use closest() as it is much better.

According to docs:

parent() gets the parent of each element in the current set of matched elements, optionally filtered by a selector.

closest() For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Differences:

if you scroll little down you can see differences between these two by official jquery site.

There are also some more good answers available on differences between these two:

parent vs closest

Difference between jQuery parent(), parents() and closest() functions

Performance:

Also performance wise closest() is better than parent() , you can check Benchmark between closest() and parent()

Answer 2

If you look at the code, .parent() is basically just a wrapper for the DOM call .parentNode . It's very quick and efficient, since it's essentially a single call to a browser built-in.

https://github.com/jquery/jquery/blob/master/src/traversing.js#L133

.closest(selector) is indeed much safer, because it guarantees you don't loop up past, or don't loop too briefly and stop before, you arrive at the intended parent - regardless of the actual shape of the DOM. But it's obviously also much more expensive. Look at the code:

https://github.com/jquery/jquery/blob/master/src/traversing.js#L63

That it's a loop at all is inherently pricier. It's also doing a lot more checks each iteration. In a very deep DOM, if you're for example using .closest to ask "Is this tag a child of X?" it will loop up the entire DOM tree to the body tag with no other bound. If you're 1000 tags deep that's 1000 pointless loops to find it. The same can occur if you're simply wrong about where the tag you're calling this is placed.

So, .parent() is highly efficient for a DOM where you're very certain about the structure. .closest(selector) is for less-trusted DOMs, although somewhat dangerous if you have no idea what the DOM looks like.