jquery
  Prev Page
Next Page  
jQuery Traversing Ancestors
The jQuery traversing  ancestor is a parent, grandparent, great-grandparent, and so on. With jQuery you can traverse up the DOM tree to find ancestors of an element.

Traversing Up the DOM Tree

jQuery provides the useful three traversing  methods such as parent(), parents() and parentsUntil() that you can use to traverse up in the DOM tree. 

  • parent()
  • parents()
  • parentsUntil()
jQuery parent() Method

The jQuery parent() method is used to get the direct parent element of the selected element.

The following example will returns the direct parent element of the <li> which is <ul> by adding the class .highlight on document ready.

<!DOCTYPE html>
<html>
<head>
<title>jQuery parent() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("li").parent().addClass("highlight");
});
</script>
<style type="text/css">
    .highlight{ background:#FF0; padding:3px 0px; color:#FFF;}        
</style>
</head>
 
<body>
 
    <h3>Free Time Learning</h3>
    <ul>
        <li><a href="http://www.freetimelearning.com" target="_blank">www.freetimelearning.com</a></li>
        <li><a href="http://www.freetimelearn.com" target="_blank">www.freetimelearn.com</a></li>
    </ul>
 
</body>
</html>
Output :
jQuery parents() Method

The jQuery parents() method is used to get the ancestors of the selected element.

The following example will add a border around all the ancestor elements of the <li> which are <ul>, <div>, <body> and the <html> elements.

<!DOCTYPE html>
<html>
<head>
<title>jQuery parents() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("li").parents().addClass("border");
});
</script>
<style type="text/css">
    *{ margin: 10px;}
    .border{ border: 2px solid #0099da;}        
</style>
</head>
 
<body>
 
<div class="container">
        <h3>Free Time Learning (FTL)</h3>
        <p><i>This is free educational website. </i></p>
        <ul>
            <li><a href="http://www.freetimelearning.com" target="_blank">www.freetimelearning.com</a></li>
            <li><a href="http://www.freetimelearn.com" target="_blank">www.freetimelearn.com</a></li>
        </ul>
</div>
    
</body>
</html>
Output :

You can optionally include one or more selector as a parameter within the parents() method to filter your search for the ancestors. The following example will apply the border around all the ancestors of the <li> that are <div> elements.

<!DOCTYPE html>
<html>
<head>
<title>jQuery parents() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("li").parents("div").addClass("border");
});
</script>
<style type="text/css">
    *{ margin: 10px;}
    .border{ border: 2px solid #0099da;}        
</style>
</head>
 
<body>
 
<div class="container">
    <h3>Free Time Learning (FTL)</h3>
    <p><i>This is free educational website. </i></p>
    <ul>
        <li><a href="http://www.freetimelearning.com" target="_blank">www.freetimelearning.com</a></li>
        <li><a href="http://www.freetimelearn.com" target="_blank">www.freetimelearn.com</a></li>
    </ul>
</div>
 
</body>
</html>
Output :
jQuery parentsUntil() Method

The jQuery parentsUntil() method is used to get all the ancestors up to but not including the element matched by the selector. In simple words we can say it returns all ancestor elements between two given elements or arguments in a DOM.

The following example returns all the ancestor elements of the <li> excluding <html> element i.e. add a border to <ul>, <div> and <body> element.

<!DOCTYPE html>
<html>
<head>
<title>jQuery parentsUntil() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("li").parentsUntil("html").addClass("border");
});
</script>
<style type="text/css">
    *{ margin: 10px;}
    .border{ border: 2px solid #0099da;}        
</style>
</head>
 
<body>
 
<div class="container">
    <h3>Free Time Learning (FTL)</h3>
    <p><i>This is free educational website. </i></p>
    <ul>
        <li><a href="http://www.freetimelearning.com" target="_blank">www.freetimelearning.com</a></li>
        <li><a href="http://www.freetimelearn.com" target="_blank">www.freetimelearn.com</a></li>
    </ul>
</div>
 
</body>
</html>
Output :
  Prev Page
Next Page