jQuery ancestors

jQuery Traversal - Ancestors

Ancestor is a father, grandfather, great-grandfather, etc.

With jQuery, you can traverse up the DOM tree to find the ancestors of an element.

Traverse up the DOM tree

These jQuery methods are useful for traversing up the DOM tree:

parent()
parents()
parentsUntil()

jQuery parent() method

parent() method returns the direct parent element of the selected element.

This method will only traverse the DOM tree one level up.

The following example returns the direct parent element of each <span> element:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .ancestors *
        {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("span").parent().css({"color":"red","border":"2px solid red"});
        });
    </script>
</head>
<body>
<div class="ancestors">
    <div style="width:300px;">div (曾祖父元素)
        <ul>ul (祖父元素)
            <li>li (父元素)
                <span>span</span>
            </li>
        </ul>
    </div>
    <div style="width:300px;">div (祖父元素)
        <p>p (父元素)
            <span>span</span>
        </p>
    </div>
</div>
</body>
</html>

Run the program to try it

jQuery parents() method

The parents() method returns all ancestor elements of the selected element, all the way up to the root element of the document (<html>).

The following example returns all ancestors of all <span> elements:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖父元素)
  <div style="width:300px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>
</html>

Run the program to try it

You can also use optional parameters to filter pairs Search for ancestor elements.

The following example returns all ancestors of all <span> elements that are <ul> elements:

<!DOCTYPE html>
<html>
<head>
    <style>
        .ancestors *
        {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("span").parents("ul").css({"color":"red","border":"2px solid red"});
        });
    </script>
</head>
<body class="ancestors">body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)
        <li>li (direct parent)
            <span>span</span>
        </li>
    </ul>
</div>
</body>
</html>

Run the program to try it

jQuery parentsUntil() method

parentsUntil() method returns all ancestor elements between two given elements.

The following example returns all ancestor elements between the <span> and <div> elements:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors"> body (曾曾祖父元素)
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>
</html>

Run the program to try it

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parents().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors">body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body> </html>

submit Reset Code

Automatic operation

jQuery ancestors

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]