jQuery parents() Method

Quiz

The parents() method in jQuery is used to select all ancestor elements of the selected element(s) in the DOM tree. This method traverses upwards through the DOM tree, starting from the selected element(s), until it reaches the root element (<html>).

We can use the optional parameter of this method filter to filter the ancestor elements.

Note: When the filter parameter is not provided, this method will select all the ancestors of a set of elements, starting from their direct parent and all the way up to to <body> and <html> elements.

Syntax

Following is the syntax of parents() method in jQuery −

$(selector).parents(filter)

Parameters

This method accepts the following optional parameter −

filter: A string containing a selector expression to filter the ancestor elements.

Note: If we want to return multiple ancestors, use comma (,) to separate each expression.

Example 1

In the following example, we are demonstrating the basic usage of parents() method in jQuery −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").parents().css({"background-color": "lightblue"})
    })
  })
</script>
</head>
<body>
  <div style="border: 3px solid black; height: 10%; width: 10%;">Div element</div>
    <h4 style="border: 2px solid red; height: 10%; width: 10%; text-align: center; margin-top: 60px;">Heading4 element</b></h4>
    <h5 style="border: 2px solid red; height: 10%; width: 10%; text-align: center; margin-top: 60px;">Heading5 element</b></h5>
    <p style="border: 2px solid red; height: 10%; width: 10%; text-align: center; margin-top: 60px;">paragraph element</b></p>
<button>Click here!</button>
</body>
</html&gt

When we execute the above program, it returns all the ancestors elements of <p> element, which are (<h5>, <h4>, <div>, and <body>) elements.

Example 2

In this example below, we are using the filter parameter to return all ancestors of <p> that are <ul> elements −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .ancestors * { 
      display: block;
      border: 2px solid lightgray;
      color: lightgray;
      padding: 5px;
      margin: 15px;
    }
  </style>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").parents("ul").css({"color": "green", "border": "2px solid green"});
      })
    });
  </script>
</head>
<body class="ancestors">body (great-great-great-grandparent)
  <div style="width:500px;">div element (great-great-grandparent)
    <ul>ul element (great-grandparent)
      <ul>ul element (grandparent)
        <li>list element (immediate parent)
          <p>Paragraph element</p>
        </li>
      </ul>
    </ul>   
  </div>
<button>Click me!</button>
</body>
</html>

After executing the above program, all the ancestors of <p> that are <ul> elements will be highlighted with green borders.

Example 3

Here, we are using the filter parameter to return all ancestors of <p> that are "<div>" and "<ul>" elements −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .ancestors * { 
      display: block;
      border: 2px solid lightgray;
      color: lightgray;
      padding: 5px;
      margin: 15px;
    }
  </style>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").parents("div, ul").css({"color": "green", "border": "2px solid green"});
      })
    });
  </script>
</head>
<body class="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div element (great-grandparent)
    <ul>ul element (grandparent)  
      <li>list element (immediate parent)
        <p>Paragraph element</p>
      </li>
    </ul>   
  </div>
<button>Click me!</button>
</body>
</html>

When we execute the above program, it returns all the ancestors elements of <p> element that are <div> and <ul> elements will be highlighted with green borders.

jquery_ref_traversing.htm

Print Page