Open In App

jQuery | Traversing Ancestors

Improve
Improve
Like Article
Like
Save
Share
Report

It is used to find ancestors of an element in the DOM tree.

There are different Methods for traversing up the DOM tree :

  • parent(): It is used to return the direct parent element of the given selected element.
  • parents(): It is used to return all ancestor elements of the given selected element upto root element.
  • parentsUntil(): It is used to return all the ancestor elements between two given arguments.

Syntax:

$(document).ready(function(){
  $("span").parent().css({"color": " ", "border": " "});
});

Example-1: Showing parent() method.




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .ancestors * {
            display: block;
            border: 2px solid lightgreen;
            color: green;
            padding: 10px;
            margin: 5px;
        }
    </style>
  
    <script src=
    </script>
    <script>
        $(document).ready(function() {
            $("span").parent().css({
                "color": "green",
                "border": "4px solid black"
            });
        });
    </script>
</head>
  
<body class="ancestors">great-great-grandparent
    <div style="width:500px;">great-grandparent
        <ul>grandparent
            <ul>direct parent
                <span>
                  <h1>
                    <li>
                    <center>
                      GeeksforGeeks
                    </center
                    </li
                 </h1>
              </span>
            </ul>
        </ul>
    </div>
</body>
  
</html>


Output:

Example-2: Showing parents() method.




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .ancestors * {
            display: block;
            border: 2px solid lightgreen;
            color: green;
            padding: 10px;
            margin: 5px;
        }
    </style>
  
    <script src=
    </script>
    <script>
        $(document).ready(function() {
            $("span").parents().css({
                "color": "green",
                "border": "4px solid black"
            });
        });
    </script>
</head>
  
<body class="ancestors">great-great-grandparent
    <div style="width:500px;">great-grandparent
        <ul>grandparent
            <ul>direct parent
                <li>
                    <span>
                  <h1>
                    <center>
                      GeeksforGeeks
                    </center>
                  </h1>
              </span>
                </li>
            </ul>
        </ul>
    </div>
</body>
  
</html>


Output:

Example-3: Showing parentsUntil() method.




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .ancestors * {
            display: block;
            border: 2px solid lightgreen;
            color: green;
            padding: 10px;
            margin: 5px;
        }
    </style>
  
    <script src=
    </script>
    <script>
        $(document).ready(function() {
            $("span").parentsUntil().css({
                "color": "green",
                "border": "4px solid black"
            });
        });
    </script>
</head>
  
<body class="ancestors">great-great-grandparent
    <div style="width:500px;">great-grandparent
        <ul>grandparent
            <ul>direct parent
                <li>
                    <span>
                  <h1>
                    <center>
                      GeeksforGeeks
                    </center>
                  </h1>
              </span>
                </li>
            </ul>
        </ul>
    </div>
</body>
  
</html>


Output:



Last Updated : 12 Apr, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads