How to Select the n-th Parent Element Using jQuery?
When dealing with a complex design where UI elements are nested inside each other and the presence of multiple levels in the DOM tree, finding the required data is not that easy. Because the compiler has to traverse through the whole tree from top to bottom to search for that data. This is a time-consuming process and requires a lot of debugging in the case of an occurrence of an error. Happily! With the help of jQuery, it is a lot easier to select the “n-th” level parent element.
This blog explains the process to select the n-th parent element using jQuery.
How to Select the n-th Parent Element Using jQuery?
The jQuery “parents()” method basically helps in finding the parent of an element at a specific level this level is passed by using the “eq()” method. By combining both of these methods, the developer can easily find the “nth” parent element for the selected or chosen child element. Let’s proceed.
Syntax
The syntax for “parents()” method is stated as:
Retrieves all parent elements for the selected child “selEle”.
The syntax for “eq()” is:
Retrieves the element corresponding to the passed index number from the provided data. It helps in selecting or retrieving data residing at a specific level or index.
Let’s visit the below code, where the nth parent element of the selected child element is going to be retrieved:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.0.js">
</script>
</head><body style="text-align: center;">
<div style="background: lightblue;">
<br><p>Linuxhint Parent</p>
<div style="background: lightcoral;">
<br>
<div class="innerChild"> Child Element</div>
<br>
</div>
</div>
<button id="0th"> 0th Element </button>
<button id="1th"> 1th Element </button>
<button id="2th"> 2th Element </button>
<p id="useCase" style="color: dodgerblue;"> </p>
<script>
$('#0th').on('click', function () {
$('.innerChild').parents().eq(0).css({
"color": "dodgerblue",
"border": "2px solid forestgreen"
});
$('#useCase').text(
"Border drawn around the first parent");
});
</script>
<script>
$('#1th').on('click', function () {
$('.innerChild').parents().eq(1).css({
"color": "dodgerblue",
"border": "2px solid forestgreen"
});
$('#useCase').text(
"Border drawn around the Grant Parent");
});
$('#useCase').text(
"Border drawn around the Grant Parent");
});
</script>
<script>
$('#2th').on('click', function () {
$('.innerChild').parents().eq(2).css({
"color": "dodgerblue",
"border": "2px solid forestgreen"
});
$('#useCase').text(
"Border drawn around the Great Grand Parent");
});
</script>
</body>
</html>
The compilation of the above-displayed code block is shown below:
- First, import the jQuery in your HTML file by inserting its CDN inside the “<head>” tag. The CDN is found by traversing to the official page.
- Next, inside the “<body>” tag create a parent “div” having a background color of “lightblue” using the CSS “background” property.
- This “div” element contains a nested “div” element which has a background color of “lightcoral” applied using the CSS “background” property.
- Next, create another nested child “div” element with a class attribute set to “innerChild”.
- In addition, create three buttons using the “<button>” tag having IDs of “0th”, “1th”, and “2th”.
- Also, create a “<p>” tag with an id of “useCase”.
- Now, enter the script tag and apply the “on()” method that performs a function when the “0th” id element gets clicked. This function selects the child element using its id of “innerChild” and attaches the “parents()” method to select all parent elements for that child.
- Moreover, the “eq()” with an index of “0” is also attached next to it to select the parent element residing on top of it or at zero level from the child position.
- To make the selection more visible use the “css()” method to apply CSS styling properties like “color” and “border”. To enhance the understanding, also use the “text()” method over the “useCase” id element and display some message regarding the selection of levels.
- In the same manner, create two more copies that invoke on “1th” and “2th” buttons and they retrieve the parent residing at the “1” and “2” levels from the child position in the DOM tree.
The output generated after the compilation of the above code is shown below:
The output shows the parent element for provided values has been selected.
Conclusion
To select the nth parent element jQuery provides “parents()” and “eq()” methods which basically retrieve all the parent elements of the selected child element. The “eq()” returns data only for a specific level or index from the retrieved data, the specific index is passed inside this “eq()” method parenthesis. This blog has successfully explained the process of selecting the nth parent element.
Source: linuxhint.com