Geek Answers Handbook

Short hand for .parent (). Parent (). Parent ()

I have a jQuery function that should get the position of the element's parent.

It looks something like this:

function show(e) { //debugger; var nextTableSelector = $(e).parent().parent().parent().parent().parent().parent().parent().parent(); }

Is there a short hand to navigate the DOM structure?

Something along the lines of:

 $(e).parent()[5];

Any suggestion?

Please note that this DOM structure is generated by a third-party JS structure, and I cannot add any additional identifiers or classes to this structure. I am stuck to make my way through the DOM this way.

+5
source share
5 answers

If you cannot identify only the element that you need, but you know its fifth parent, you can make $(e).parents().eq(5) or $(e).parents()[5] , as you assumed.

+3
source

So you need either .closest() or .parents() as shown below.

 var target = $('#source').closest('#target'); var target = $('#source').parents('#target'); alert ( target[0].id );

HTML example for the above:

 <div id="target"> Man! <div> <div> <div id="source"></div> </div> </div> </div>

I would recommend .closest() , because .parents() moves the DOM tree to the root element of the document, adding each ancestor element to a temporary collection; it then filters this collection based on the selector if supplied, while .closest() moves through the DOM tree only until it finds a match for the supplied selector.

Edit:

As for your case, you may want to do:

 var n = 5; //say you want the 5th parent var parent5th = $("#source").parents().eq(n-1); alert (parent5th[0].id); //So, your code becomes: var n = 8; //You want the 8th parent $(e).parents().eq(n-1);

Here is a not-so-ugly function if you:

 $.fn.nthParent = function(level) { level = level || 1; if (level <= 0) return; return level === 1 && $(this).parent() || $(this).parents().eq(level-1); }

Using:

 //Apply some CSS to level 1 (immediate) parent $("#source").nthParent().css({ border: "1px solid red" }); OR $(".source").each(function(i) { $(this).nthParent(i+1).css({ border: "4px solid blue" }); });

Demo for the above.

+8
source

You can use .closest() instead of parent().parent() , then you will go to the closest element, no matter how far it will be in the DOM structure.

+2
source

As I mentioned in the comment to another answer, if you want to target a specific parent with a selector, you will want to use .closest .

However, I think that after something you get the parent X in the tree, the best way to do this is with a function, I think:

 function getXParent(el, x) { // el = jQuery element, x = number of generations var curEl = el; for (var i = 1; i <= x; i++) { curEl = curEl.parent(); } return curEl; } var newEl = getXParent($('#t5'), 3); alert(newEl[0].id); alert($('#t5').parents()[2].id); // Courtesy of Narayon 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="t1"> <div id="t2"> <div id="t3"> <div id="t4"> <div id="t5"> </div> </div> </div> </div> </div>

EDIT: Narayon has a simpler alternative, I believe.

+2
source

I know this answer is very late, but there is another way to avoid having to write .parent () 5 times:

 eval("$(e)" + Array(5).join(".parent()"))

also do the trick.

0
source

More articles:


All Articles