How to find nth parent of an element using jquery
JqueryDomNavigationParentJquery Problem Overview
I want to find the nth parent element of an given element and access the attributes of parent.
<div id='parent1'><br/>
<div id='parent2'><br/>
<span><p id='element1'>Test</p></span><br/>
</div><br/>
<div id='parent3'><br/>
<span><p id='element2'>Test</p></span><br/>
</div><br/>
</div>
I want to access the 3rd parent element of element1 without using
$('#element1').parent().parent().parent()
Any help would be appreciated
Jquery Solutions
Solution 1 - Jquery
You can use .parents()
and .eq()
:
$('#element1').parents().eq(2);
Solution 2 - Jquery
parents() returns a list, so this works:
$('#element1').parents()[2];
Solution 3 - Jquery
use:
$('#element1').closest('#parent1');
Solution 4 - Jquery
You could make a little plugin to take care of that:
$.fn.nthParent = function(n){
var p = this;
for(var i=0;i<n;i++)
p = p.parent();
return p;
}
and then use it as:
$('#element1').nthParent(3);