jQuery Ancestors
An ancestor is a parent, grandparent, great-grandparent, and so on in logical relationships.
parent(), parents(), and parentsUntil() are jQuery methods for quickly getting the parent or other ancestors of an entity in the hierarchy by traversing up in the DOM tree, either single or multiple levels.
The parent() method
The direct parent of the selected element is obtained using the jQuery parent() process.
By adding the class to the direct parent element of the <ul>, which is <div>, the following example will highlight it.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<script>
$(document).ready(function(){
$("ul").parent().addClass("highlight");
});
</script>
</head>
<body>
<h1>Hello World</h1>
<p>This paragraph is outside the parent element of ul and it will not be highlighted.</p>
<div class="container">
<p>This paragraph is inside the parent element of ul and it will be highlighted.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Live Demo!
The parents() method
The ancestors of the selected entity are obtained using the jQuery parents() process
The following example adds a border around the <ul>, <div>, <body>, and <html> components, which are all ancestor elements of the <li>.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
*{
margin: 10px;
}
.frame{
border: 2px solid green;
}
</style>
<script>
$(document).ready(function(){
$("li").parents().addClass("frame");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is just a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Live Demo!
To filter your quest for ancestors, you can use one or more selectors as a parameter in the parents() process. The border will be applied to all the ancestors of the <li> that are <div> elements in the following example.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
*{
margin: 10px;
}
.frame{
border: 2px solid green;
}
</style>
<script>
$(document).ready(function(){
$("li").parents("div").addClass("frame");
});
</script>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is just a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Live Demo!
The parentsUntil() method
To filter your quest for ancestors, you can use one or more selectors as a parameter in the parents() process. The border will be applied to all the ancestors of the <li> that are <div> elements in the following example.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
*{
margin: 10px;
}
.frame{
border: 2px solid green;
}
</style>
<script>
$(document).ready(function(){
$("li").parentsUntil("html").addClass("frame");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is just a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
Live Demo!