Given an element from DOM, The task is to find the n-th level parent of that element using JQuery. Below few of the methods are discussed:
- jQuery on() Method: This method adds one or more event handlers for the selected elements and child elements.
Syntax:
$(selector).on(event, childSel, data, fun, map)
Parameters:
- event: This parameter is required. It specifies one or more than one event(s) or namespaces to add to the selected elements. If there are multiple event values, separate them by space. The event must be valid.
- childSel: This parameter is optional. It specifies that the event handler should only be attached to the defined child elements.
- data: This parameter is optional. It specifies additional data to pass to the function.
- fun: This parameter is required. It specifies the function to run when the event occurs.
- map: It specifies an event map ({event:func(), event:func(), …}) having one or more events to add to the selected elements, and functions to run when the events happen.
- jQuery parents() Method: This is an inbuilt method in jQuery and is used to find all parent elements related to the selected element. This method traverses all the levels up the selected element and returns all elements.
Syntax:
$(selector).parents()
- Return Value: It returns all parents of the selected element.
- jQuery eq() Method: This method returns an element with a passed index number of the matched elements. The index starts from 0.
Syntax:
$(selector).eq(index)
Parameter:
- index: This parameter is required. It specifies the index of the element. Accepts positive or negative numbers.
Example 1: This example uses the parents() and eq() method to find the 0th level parent of class=’child’ element which is a <div> element.
html
<!DOCTYPE HTML> <html>
<head>
<title>
JQuery | Get the n-th level parent of an element.
</title>
</head>
<script src=
</script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP" style="font-size: 17px; font-weight: bold;">
</p>
<div class="parent">
<div class="child">
child
</div>
</div>
<br>
<button>
click here
</button>
<p id="GFG_DOWN" style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
$('#GFG_UP').text('Click on the button to see result');
$('button').on('click', function () {
$('.child').parents().eq(0).css({
"color": "green",
"border": "2px solid green"
});
$('#GFG_DOWN').text(
"Border drawn around the first parent " +
"of element with class = 'child'");
});
</script>
</body>
</html>
|
Output:
Example 2: This example uses the parents() and eq() method to find the 2nd level parent of class=’child’ element which is a <body> element.
html
<!DOCTYPE HTML> <html>
<head>
<title>
JQuery| Get the n-th level parent of an element.
</title>
</head>
<script src=
</script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP" style="font-size: 17px; font-weight: bold;">
</p>
<div class="parent">
<div class="child">
child
</div>
</div>
<br>
<button>
click here
</button>
<p id="GFG_DOWN" style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
$('#GFG_UP').text('Click on the button to see result');
$('button').on('click', function () {
$('.child').parents().eq(2).css({
"border": "2px solid green"
});
$('#GFG_DOWN').text(
"Border drawn around the third parent " +
"of element with class = 'child'");
});
</script>
</body>
</html>
|
Output: