In logical relationships, an ancestor is a parent, grandparent, great-grandparent, and so forth.
jQuery offers useful methods like parent(), parents(), and parentsUntil(). These methods help you move up the DOM tree, either by single or multiple levels, to easily locate the parent or other ancestors of an element within the hierarchy.
parent() MethodThe jQuery parent() method is used to find the direct parent of a selected element.
In the example below, the direct parent element of the <li>, which is <ul>, will be highlighted by adding the class .highlight when the document is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery parent() Demo</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>parents() MethodThe jQuery parents() method is used to retrieve the ancestors of a selected element.
In the example below, a border will be added around all the ancestor elements of the <li> tag, which includes the <ul>, <div>, <body>, and <html> elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery parents() Demo</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>You can optionally include one or more selectors as a parameter within the parents() method to filter your search for ancestors. In the example below, a border will be applied around all the <div> elements that are ancestors of the <li> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery parents() Demo</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>parentsUntil() MethodThe jQuery parentsUntil() method is used to retrieve all ancestors up to, but not including, the element matched by the selector. Simply put, it returns all ancestor elements between two specified elements in a DOM hierarchy.
In the example below, a border will be added around all ancestor elements of the <li>, excluding the <html> element. This means a border will be added to the <ul>, <div>, and <body> elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery parentsUntil() Demo</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>