Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have a jQuery function, that needs to get the position of an element's parent.

It looks something like:

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

Is there a short hand for traversing up the DOM structure?

Something along the lines of:

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

Any suggestion?

Note this DOM structure is generated by a 3rd party JS framework, and I'm not able to append any additional ID's or Classes to this structure. I'm stuck having to work my way up through the DOM this way.

like image 450
Mark Avatar asked Jul 23 '15 15:07

Mark


People also ask

What is parent parent in JavaScript?

The parent() method returns the direct parent element of the selected element. The DOM tree: This method only traverse a single level up the DOM tree. To traverse all the way up to the document's root element (to return grandparents or other ancestors), use the parents() or the parentsUntil() method.

What is parent element in jQuery?

The parent() is an inbuilt method in jQuery which is used to find the parent element related to the selected element. This parent() method in jQuery traverse a single level up the selected element and return that element. Syntax: $(selector).parent() Here selector is the selected elements whose parent need to find.

What is parent in HTML?

A parent is an element that is directly above and connected to an element in the document tree. In the diagram below, the <div> is a parent to the <ul>. A child is an element that is directly below and connected to an element in the document tree.

What does $( Div parent will select?

The :parent Selector page on jQuery says: Select all elements that have at least one child node (either an element or text). So $('div') would select all divs and $('div:parent') would select only those with children.


2 Answers

So, what you need is either .closest() or .parents(), as below.

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

Sample HTML for the above:

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

I'd recommend .closest() as .parents() travels up the DOM tree to the document's root element, adding each ancestor element to a temporary collection; it then filters that collection based on a selector if one is supplied whereas .closest() travels up 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 will:

$.fn.nthParent = function(level) {

    level = level || 1;
    if (level <= 0) return;

    return level === 1 &&
        $(this).parent() || 
        $(this).parents().eq(level-1);
}

Usage:

//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"
    });
});

A Demo for the above.

like image 177
lshettyl Avatar answered Oct 20 '22 20:10

lshettyl


If you can't identify exclusively the element you want but you know its the fifth parent up, you can do $(e).parents().eq(5) or $(e).parents()[5] like you suggested.

like image 27
Narayon Avatar answered Oct 20 '22 21:10

Narayon