jQuery: selecting grandparents

Question

Is there a better way to select grandparent elements in jQuery in order to avoid this ?

$(this).parent().parent().parent().parent().parent().children(".title, .meta").fadeIn("fast");

Thanks.

and what about children().children().children().children(".title") ? — aneuryzm, Mar 03 '10 at 15:35
Couldn't resist, you can use $(this).gparent(2) with the code provided in my downvoted answer. Don't know why it's downvoted, since it's the solution that answers your question... — patrick, Jan 18 '18 at 11:46

score 61 · Accepted Answer · edited Feb 23 '13 at 11:06

61

You can use the parents() method which matches parents against a selector

http://api.jquery.com/parents/

Or if you're using 1.4 there is a new parentsUntil() method

http://api.jquery.com/parentsUntil/

edited Feb 23 '13 at 11:06

Paul D. Waite

96,640
56
199
270

answered Mar 03 '10 at 09:15

Neil Aitken

7,856
3
41
40

score 28 · Answer 2 · answered Mar 03 '10 at 09:25

In addition to parents(), as they've said, you should also check out closest(). Read the comparison in the documentation there, but its main differences are that it searches for only one result, and it includes $(this) in what it searches (could get the thing you're searching from if you're not specific enough). Pros and cons.

score 6 · Answer 3 · answered Feb 07 '12 at 03:58

I wrote this simple plugin because I thought I had an unambiguous class selection somewhere giving me errors. Selecting grandparent seemed more direct than $().parents() for this particular case.

Well, I used this once then realized I actually had a spelling error. Not sure how helpful it really is. $('myelem').gparent(2); gets you the grandparent of 'myelem'.

(function( $ ){
$.fn.gparent = function( recursion ){
    if( recursion == undefined ) recursion = 2;
    if(typeof(recursion) == "number"){
        recursion = parseInt( recursion );
        if( recursion > 0 ){
            gparent_holder = $(this);
            for(var gparent_i = 0; gparent_i < recursion; gparent_i++){
                gparent_holder = gparent_holder.parent();
            }
            return gparent_holder;
        }
        else return false;
    }
    else return false;
}
})( jQuery );

I like this solution. We're into jQuery >2.0 and there's still no straightforward, clean way to navigate 'k' levels up. Seems like a trivial thing to add to the base framework. — Evan Steinkerchner, Jul 22 '14 at 14:56
nice to bring up recursiveness. A recursive function are a great solution for problems like these... yet your solution is not recursive. I posted a recursive snippet as an answer to this question — patrick, Jul 08 '16 at 22:32

score 3 · Answer 4 · answered Mar 03 '10 at 09:17

3

Use the parents() selector to get all parents of an element. You can then either search the collection, or iterate over it if you want to affect all ancestors.

answered Mar 03 '10 at 09:17

Traveling Tech Guy

27,194
23
111
159

score 3 · Answer 5 · answered Jul 08 '16 at 22:31

3

@Femi had an answer to do this, and mentioned recursion, yet his solution was not recursive, here's a recursive jQuery solution for getting ancestors of an item:

$.fn.gparent = function( recursion ){
   console.log( 'recursion: ' + recursion );
   if( recursion > 1 ) return $(this).parent().gparent( recursion - 1 );
   return $(this).parent();
};

If this is your HTML:

<div id='grandparent'>
  <div id='parent'>
    <div id='child'>
      child
    </div>
  </div>
</div>

You can call

console.log( $('#child').gparent( 2 ) );

to get the grandparent of element child. Here's the JSFiddle

answered Jul 08 '16 at 22:31

patrick

11,519
8
71
80

3

why on earth does this get a downvote without a comment... it's recursive, it's documented, a Fiddle provided to show it works, and it's the answer to the OP's question... SO should make it impossible to downvote without an explanation. Now a perfectly working solution (which I use a lot!) is not showing as a valid one... – patrick Jan 18 '18 at 11:43
1

Instead of adding our own function to do `gparent(2)` we can use `parents().eq(2)` – Stéphane Bruckert Oct 20 '18 at 15:22

score 1 · Answer 6 · edited Feb 27 '22 at 09:36

1

Using parents() and children() get the same results.

Example instead of using this :

$(this).parent().parent().parent().children(".title").fadeIn("fast");

you can use this :

$(this).parents().children(".title").fadeIn("fast");

edited Feb 27 '22 at 09:36

odil-io

180
9

answered Jul 25 '19 at 08:05

NJENGAH

955
15
12

score 0 · Answer 7 · answered Apr 09 '23 at 13:33

Basic Example

<div id="europe">
   <div>
       <span id="denmark">Minimum Stok</span> 
   </div>
</div>

$('span#denmark').parents("div#europe").attr('class', 'place')

Result;

<div id="europe" class="place">
   <div>
       <span id="denmark">Minimum Stok</span> 
   </div>
</div>

jQuery: selecting grandparents

7 Answers7

Linked