159

When I want to get, for example, the 3rd level parent of the element I must write $('#element').parent().parent().parent() Is there a more optimal method for this?

4
  • 2
    I want to give only number (Level) and get element, because my element may not have any calss id or name Aug 17, 2011 at 13:31
  • 1
    If you plan on reusing this functionality, the optimal solution is to make a jQuery plugin.
    – zzzzBov
    Aug 17, 2011 at 13:35
  • 3
    See jsperf.com/jquery-get-3rd-level-parent for some performance comparisons
    – a'r
    Aug 17, 2011 at 14:06
  • 1
    Another good tool is the ".closest()" function. $('li.item').closest('div') will give you the DIV that is the closest ancestor of the li.item. Good for when you don't know how many levels up the element is, but you DO know its tagname/class/something else.
    – GHP
    Aug 17, 2011 at 18:42

13 Answers 13

285

Since parents() returns the ancestor elements ordered from the closest to the outer ones, you can chain it into eq():

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".
13
  • can I using this $('#element').parents()[2]? or it must by with eq(2) Aug 17, 2011 at 13:44
  • 1
    this will not work for multiple element selections, a safer way would be: $('.element').first().parents().eq(num);
    – zzzzBov
    Aug 17, 2011 at 13:44
  • 8
    @Arthur, using [2] will return the underlying DOM element, using eq(2) will return a jQuery object. Aug 17, 2011 at 13:47
  • 1
    @zzzzBov, very true, but there will only be one element selected in the questioner's case (because he matches an id). Aug 17, 2011 at 13:48
  • If you do a look up on an id "#element" it would only ever return a single element as that's how ID lookups work, they return the first element with that ID in the dom. If on the other hand you did "div#element" or a class selector you would be right.
    – Henry
    Aug 17, 2011 at 13:48
29

Depends on your needs, if you know what parent your looking for you can use the .parents() selector.

E.G: http://jsfiddle.net/HenryGarle/Kyp5g/2/

<div id="One">
    <div id="Two">
        <div id="Three">
            <div id="Four">

            </div>
        </div>
    </div>
</div>


var top = $("#Four").parents("#One");

alert($(top).html());

Example using index:

//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);

alert($(topTwo ).html());
3
  • I now this way, but I want to give level Aug 17, 2011 at 13:34
  • 3
    Read further down the answer and all shall be revealed! (I've given you level examples)
    – Henry
    Aug 17, 2011 at 13:37
  • This works nicely for all other kinds of selectors. For example, if you want the list of all parents and parents of parents with a certain class, this will return them.
    – darksky
    Aug 1, 2017 at 22:21
9

You could give the target parent an id or class (e.g. myParent) and reference is with $('#element').parents(".myParent")

1
  • I want to give only number and get element, because my element may not have any calss id or name Aug 17, 2011 at 13:31
7

Didn't find any answer using closest() and I think it's the most simple answer when you don't know how many levels up the required element is, so posting an answer:
You can use the closest() function combined with selectors to get the first element that matches when traversing upwards from the element:

('#element').closest('div')    // returns the innermost 'div' in its parents
('#element').closest('.container')    // returns innermost element with 'container' class among parents
('#element').closest('#foo')    // returns the closest parent with id 'foo'
6

A faster way is to use javascript directly, eg.

var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);

This runs significantly faster on my browser than chaining jQuery .parent() calls.

See: http://jsperf.com/jquery-get-3rd-level-parent

1
  • By "significantly faster", we're looking at about an order of magnitude in terms of speed difference (running jQuery 1.10.1 on Chrome 51). Definitely worthwhile implementing if you're tuning for speed. Jul 6, 2016 at 7:57
3

It's simple. Just use

$(selector).parents().eq(0); 

where 0 is the parent level (0 is parent, 1 is parent's parent etc)

3

Just add :eq() selector like this:

$("#element").parents(":eq(2)")

You just specify index which parent: 0 for immediate parent, 1 for grand-parent, ...

1
3

If you plan on reusing this functionality, the optimal solution is to make a jQuery plugin:

(function($){
$.fn.nthParent = function(n){
  var $p = $(this);
  while ( n-- >= 0 )
  {
    $p = $p.parent();
  }
  return $p;
};
}(jQuery));

Of course, you may want to extend it to allow for an optional selector and other such things.

One note: this uses a 0 based index for parents, so nthParent(0) is the same as calling parent(). If you'd rather have 1 based indexing, use n-- > 0

6
  • I think you will find this part faster:var p = 1 + n; while (p--) { $p = $p.parent(); } and IF you want to change to 1 based, Javascript being "falsey" you can use: while (n--) { $p = $p.parent();} saving a conditional check Aug 17, 2011 at 19:30
  • @Mark Schultheiss, It's not just about speed, it's about reliability too. What happens to your function if someone ignorantly calls nthParent(-2)? Your example is broken.
    – zzzzBov
    Aug 17, 2011 at 19:33
  • OR just return (function($) { $.fn.nthParent = function(n) { return $(this).parents().eq(n); }; }(jQuery)); Aug 17, 2011 at 19:39
  • @Mark Schultheiss, again, reliability. My function returns the nthParent for every element in the selection, your function returns the nth element in the list of parents which will be incorrect for selections with more than one element.
    – zzzzBov
    Aug 17, 2011 at 19:43
  • true regarding the -2, and as in your example using var p = n >? (1 + n):1; instead would return the first parent in that case rather than "nothing" - or where it breaks the loop in my example. SO, it probably should be: (function($) { $.fn.nthParent = function(n) { var $p = $(this); if (!(n > -0)) { return $() }; var p = 1 + n; while (p--) { $p = $p.parent(); } return $p; }; }(jQuery)); if you do not want to return anything. Aug 17, 2011 at 20:38
3

If you have a common parent div you can use parentsUntil() link

eg: $('#element').parentsUntil('.commonClass')

Advantage is that you need not to remember how many generation are there between this element and the common parent(defined by commonclass).

1

you can also use :

$(this).ancestors().eq(n) 

ex: $(this).ancestors().eq(2) -> the parent of the parent of this.

1

using eq appears to grab the dynamic DOM whereas using .parent().parent() appears to grab the DOM that was initially loaded (if that is even possible).

I use them both on an element that has classes applied it to on onmouseover. eq shows the classes while .parent().parent() doesnt.

1

As parents() returns a list, this also works

$('#element').parents()[3];
0

You could use something like this:

(function($) {
    $.fn.parentNth = function(n) {
        var el = $(this);
        for(var i = 0; i < n; i++)
            el = el.parent();

        return el;
    };
})(jQuery);

alert($("#foo").parentNth(2).attr("id"));

http://jsfiddle.net/Xeon06/AsNUu/

1
  • 1
    Not the downvoter, but this is probably the worst solution (ie inefficient) here.
    – zatatatata
    Aug 17, 2011 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.