English 中文(简体)
jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - Traversing Ancestors
  • 时间：2024-12-22

jQuery - Traversing Ancestors

Previous Page Next Page  

jQuery provides methods to traverse upwards inside the DOM tree to find ancestor(s) of a given element. These methods can be used to find a parent, grandparent, great-grandparent, and so on for a given element inside the DOM.

There are following three methods to traverse upward inside the DOM tree:

    parent() - returns the direct parent of the each matched element.

    parents() - returns all the ancestor elements of the matched element.

    parentsUntil() - returns all ancestor elements until it finds the element given as selector argument.

jQuery parent() Method

The jQuery parent() method returns the direct parent of the each matched element. Following is a simple syntax of the method:

$(selector).parent([filter])

We can optionally provide a filter selector in the method. If the filter is suppped, the elements will be filtered by testing whether they match it.

Synopsis

Consider the following HTML content:

<span class="great-grand-parent">
   <span class="grand-parent">
      <ul class="parent">
         <p class="child-one">Child One</p>
         <p class="child-two">Child Two</p>
      </ul>
   </span>
 </span>

Now if we use the parent() method as follows:

$( ".child-two" ).parent().css( "border", "2px sopd red" );

It will produce following result:

<span class="great-grand-parent">
   <span class="grand-parent">
      <ul class="parent" style="border:2px sopd red">
         <p class="child-one">Child One</p>
         <p class="child-two">Child Two</p>
      </ul>
   </span>
</span>

Example

Let s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $( ".child-two" ).parent().css( "border", "2px sopd red" );
      });
   });
</script>
<style>
   .great-grand-parent *{display:block; border:2px sopd #aaa; color:#aaa; padding:5px; margin:5px;}
</style>
</head>
<body>
   <span class="great-grand-parent">
      <span style="width:500px;" class="grand-parent">
         <ul class="parent">
            <p class="child-one">Child One</p>
            <p class="child-two">Child Two</p>
         </ul>
      </span>
    </span>
   <br>
   <button>Mark Parent</button>
</body>
</html>

You can try the same example by creating another block of parent and child elements with the same classes and then verify that parent() will apply given CSS to all the matched elements.

jQuery parents() Method

The jQuery parents() method returns all the ancestor elements of the matched element. Following is a simple syntax of the method:

$(selector).parents([filter])

We can optionally provide a filter selector in the method. If the filter is suppped, the elements will be filtered by testing whether they match it.

The parents() and parent() methods are similar, except that the parent() method only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set.

Synopsis

Consider the following HTML content:

<span class="great-grand-parent">
   <span class="grand-parent">
      <ul class="parent">
         <p class="child-one">Child One</p>
         <p class="child-two">Child Two</p>
      </ul>
   </span>
 </span>

Now if we use the parents() method as follows:

$( ".child-two" ).parents().css( "border", "2px sopd red" );

It will produce following result:

<span class="great-grand-parent" style="border:2px sopd red">
   <span class="grand-parent" style="border:2px sopd red">
      <ul class="parent" style="border:2px sopd red">
         <p class="child-one">Child One</p>
         <p class="child-two">Child Two</p>
      </ul>
   </span>
</span>

Example

Let s try the following example and verify the result. Here we are going to filter only <span> elements for clarity purpose:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $( ".child-two" ).parents("span").css( "border", "2px sopd red" );
      });
   });
</script>
<style>
   .great-grand-parent *{display:block; border:2px sopd #aaa; color:#aaa; padding:5px; margin:5px;}
</style>
</head>
<body>
   <span style="width:525px;" class="great-grand-parent">
      <span style="width:500px;" class="grand-parent">
         <ul class="parent">
            <p class="child-one">Child One</p>
            <p class="child-two">Child Two</p>
         </ul>
      </span>
    </span>
   <br>
   <button>Mark Parents</button>
</body>
</html>

jQuery parentsUntil() Method

The jQuery parentsUntil() method returns all the ancestor elements available between two selectors. Following is a simple syntax of the method:

$(selector1).parentsUntil([selector2][,filter])

We can optionally provide a filter selector in the method. If the filter is suppped, the elements will be filtered by testing whether they match it.

Synopsis

Consider the following HTML content:

<span class="great-grand-parent">
   <span class="grand-parent">
      <ul class="parent">
         <p class="child-one">Child One</p>
         <p class="child-two">Child Two</p>
      </ul>
   </span>
 </span>

Now if we use the parentsUntil() method as follows:

$( ".child-two" ).parentsUntil(".great-grand-parent").css( "border", "2px sopd red" );

It will produce following result:

<span class="great-grand-parent">
   <span class="grand-parent" style="border:2px sopd red">
      <ul class="parent" style="border:2px sopd red">
         <p class="child-one">Child One</p>
         <p class="child-two">Child Two</p>
      </ul>
   </span>
</span>

Example

Let s try the following example and verify the result:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $( ".child-two" ).parentsUntil(".great-grand-parent").css( "border", "2px sopd red" );
      });
   });
</script>
<style>
   .great-grand-parent, .great-grand-parent *{display:block; border:2px sopd #aaa; color:#aaa; padding:5px; margin:5px;}
</style>
</head>
<body>
   <span style="width:525px;" class="great-grand-parent">
      <span style="width:500px;" class="grand-parent">
         <ul class="parent">
            <p class="child-one">Child One</p>
            <p class="child-two">Child Two</p>
         </ul>
      </span>
    </span>
   <br>
   <button>Mark Parents</button>
</body>
</html>

jQuery Traversing Reference

You can get a complete reference of all the jQuery Methods to traverse the DOM at the following page: jQuery Traversing Reference.

Advertisements

友情链接

Allggapp Allqahome-程序员问答家园 mvfinale.com-影视剧情大结局大全