jQuery parent() Method

Quiz

The parent() method in jQuery is used to traverse up the DOM tree to the parent element(s) of the selected element(s). It selects and returns the immediate parent element of the selected element(s) in the DOM hierarchy.

If we want to traverse all the way up the DOM tree (to return the grandparents, great-grandparents, or ancestors), we need to use the parents() or parentsUntil() method.

Syntax

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

$(selector).parent(filter)

Parameters

This method accepts the following optional parameter −

filter: A string containing a selector expression to filter the parent element(s) based on specific criteria.

Example 1

In the following example, we are using the parent() method to return the direct parent element of <p> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").parent().css({"background-color": "lightblue"})
    })
  })
</script>
</head>
<body>
  <div style="border: 3px solid black; height: 30%; width: 0%;">
    <p style="border: 2px solid red; text-align: center; margin-top: 60px;">Click on the below button to find the parent element of <b>p</b> element</b>.</p>
  </div>
<button>Click here!</button>
</body>
</html>

When we execute the above program and click on the button, it selects the parent element (div) and changes the background color to light blue.

Example 2

In the below example, we are selecting the direct parent elements of each <span> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("span").parent().css({"background-color": "lightblue"})
    })
  })
</script>
</head>
<body>
  <p>Paragraph element.</p>
  <p>Paragraph element.</p>
  <p>Paragraph element <span>Hello, I'am span element.</span></p>
  <p>Paragraph element <span>Hello, I'am span element.</span></p>
  <p>Paragraph element.</p>
<button>Click here!</button>
</body>
</html>

When we execute the above program and click on the button, the direct parent elements of span elements will be selected, and their background color will change to light blue.

Example 3

Here, we are selecting all the direct parent (<div>) element of each <span> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("span").parent("p.one").css({"background-color": "lightblue"})
    })
  })
</script>
</head>
<body>
  <p>Paragraph element.</p>
  <p>Paragraph element.</p>
  <p class="one">Paragraph element (with class "one") <span>Hello, I'am span element.</span></p>
  <p class="two">Paragraph element (with class "two") <span>Hello, I'am span element.</span></p>
  <p>Paragraph element.</p>
<button>Click here!</button>
</body>
</html>

After executing the above program, the direct parents element of span elements will be selected, and their background color will change to light blue.

jquery_ref_traversing.htm

Print Page