8

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()?

Kousha
  • 32,871
  • 51
  • 172
  • 296
  • 1
    Maybe you will have to get access to element's parent and you will not care (or even don't know) what it is. Then you come exactly to the usage of `.parent()` – Regent Jul 27 '14 at 17:41
  • It would appear that your application is very suitable for `closest`. But if you only ever wanted one level up, for example, then `parent` would be most useful. The advantage of `parent` is that you don't need the tag to find it. It all depends upon your requirements. – lurker Jul 27 '14 at 17:42
  • lots of cases where parent is suitable. Suppose you don't know what class or ID it is or even tag but you know you want the actual parent? `closest()` is more effective for specific targets though, especially when not sure how far away they are – charlietfl Jul 27 '14 at 17:44
  • There are many differences and needs in using `parent()` and `closest()` function in jquery.It depends on what your need actually.. See the difference between them [here](http://stackoverflow.com/questions/9193212/difference-between-jquery-parent-and-closest-functions) – Avinash Babu Jul 27 '14 at 17:42
  • Beware that `closest` actually checks the element itself. http://jsfiddle.net/tarabyte/A7ngQ/ – Yury Tarabanko Jul 27 '14 at 18:06

2 Answers2

9

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()

Community
  • 1
  • 1
Ehsan Sajjad
  • 61,834
  • 16
  • 105
  • 160
  • Thanks for the info, but that is exactly what I said in my description as to why I want to use `closest()` and not `parent()`. – Kousha Jul 27 '14 at 18:11
  • because ``closest()`` is independent of DOM structure and change and its performance is also better than ``parent()`` – Ehsan Sajjad Jul 27 '14 at 18:14
  • 1
    The parent vs closest statement here is incorrect. The benchmark links to a benchmark of .parents() vs .closest(). .parents() is very different from .parent(). .parent() is a single instruction and fast. .parents() does something else entirely, and is very expensive - it gets ALL the parents up the entire DOM chain, not just the immediate parent: http://api.jquery.com/parents/ `.parent()` is much faster than `.closest()`, which is faster than `.parents()` – Chris Moschini Jul 27 '14 at 20:33
  • Can you show benchmark as support to your statement – Ehsan Sajjad Jul 27 '14 at 21:43
  • @ChrisMoschini i have attached the correct benchmark still the ``closest()`` is faster than ``parent()`` – Ehsan Sajjad Jul 27 '14 at 22:28
  • That also does not test .parent(). Look at the code: `idn = denna.attr("id"); console.log($('select.filtration').not('#'+idn));` No calls to .parent() in the .parent() benchmark. There's no mystery to this anyway - .closest() is a loop and .parent() is a single-issue call. .parent() is going to be faster, period. – Chris Moschini Jul 28 '14 at 02:02
3

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.

Chris Moschini
  • 36,764
  • 19
  • 160
  • 190