In logical relationships, an ancestor is a parent, grandparent, great-grandparent, etc.
Methods such as parent(), parents(), and parentsUntil() are provided by jQuery so you can traverse up in the DOM tree either single or multiple levels to easily get the parent or other ancestors of an element in the hierarchy.
The parent() method in jQuery is used to get the direct parent of the selected element.
the example below shows how you will highlight the direct parent element of the <li> which is <ul> by adding the class ‘.highlight’ on document ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting the Direct Parent Element in jQuery</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("li").parent().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
The parents() method in jQuery is used to get the ancestors of the selected element.
The example below shows how you will add a border around all the ancestor elements of the <li> which are <ul>, <div>, <body> and the <html> elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting All the Ancestor Elements in jQuery</title>
<style>
*{
margin: 10px;
}
.frame{
border: 2px solid green;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("li").parents().addClass("frame");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
More so, we can include optionally one or more selectors as a parameter within the parents() method to filter your search for the ancestors. The example below shows how you will apply the border around all the ancestors of the <li> that are <div> elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting the Specific Ancestor Elements in jQuery</title>
<style>
*{
margin: 10px;
}
.frame{
border: 2px solid green;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("li").parents("div").addClass("frame");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
The parentsUntil() method in jQuery is typically used to get all the ancestors up to but not including the element matched by the selector. In other words, it returns all ancestor elements between two given elements in a DOM hierarchy.
The example below shows how you will add a border around all the ancestor elements of the <li> excluding <html> element i.e. add a border to <ul>, <div> and <body> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting All the Ancestors between Two Elements in jQuery</title>
<style>
*{
margin: 10px;
}
.frame{
border: 2px solid green;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("li").parentsUntil("html").addClass("frame");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>