Jquery 简明教程

jQuery - Traversing Ancestors

jQuery 提供方法在 DOM 树内向上遍历以查找给定元素的祖先。这些方法可用于查找 DOM 内给定元素的父级、祖父级、曾祖父级，等等。

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.

有以下三种方法可在 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

jQuery parent() 方法返回与每个匹配元素的直接父元素。以下为该方法的简单语法：

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

$(selector).parent([filter])

我们还可以选择在方法中提供 filter 选择器。如果提供了过滤器，则元素将通过测试它们是否与过滤器匹配来进行过滤。

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

Synopsis

考虑以下 HTML 内容：

Consider the following HTML content:

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

现在，如果我们像下面这样使用 parent() 方法：

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

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

将会产生以下结果：

It will produce following result:

<div class="great-grand-parent">
   <div class="grand-parent">
      <ul class="parent" style="border:2px solid red">
         <li class="child-one">Child One</li>
         <li class="child-two">Child Two</li>
      </ul>
   </div>
</div>

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").click(function(){
         $( ".child-two" ).parent().css( "border", "2px solid red" );
      });
   });
</script>
<style>
   .great-grand-parent *{display:block; border:2px solid #aaa; color:#aaa; padding:5px; margin:5px;}
</style>
</head>
<body>
   <div class="great-grand-parent">
      <div style="width:500px;" class="grand-parent">
         <ul class="parent">
            <li class="child-one">Child One</li>
            <li class="child-two">Child Two</li>
         </ul>
      </div>
    </div>
   <br>
   <button>Mark Parent</button>
</body>
</html>

你可以通过创建另一个带有相同类的父元素和子元素块并验证 parent() 会将给定的 CSS 应用到所有匹配元素，来尝试相同的示例。

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

jQuery parents() 方法返回匹配元素的所有祖先元素。以下为该方法的简单语法：

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

$(selector).parents([filter])

我们还可以选择在方法中提供 filter 选择器。如果提供了过滤器，则元素将通过测试它们是否与过滤器匹配来进行过滤。

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

Synopsis

考虑以下 HTML 内容：

Consider the following HTML content:

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

现在，如果我们像下面这样使用 parents() 方法：

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

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

将会产生以下结果：

It will produce following result:

<div class="great-grand-parent" style="border:2px solid red">
   <div class="grand-parent" style="border:2px solid red">
      <ul class="parent" style="border:2px solid red">
         <li class="child-one">Child One</li>
         <li class="child-two">Child Two</li>
      </ul>
   </div>
</div>

Example

我们试试下面的示例并验证结果。这里我们仅过滤 <div> 元素以明确目的：

Let’s try the following example and verify the result. Here we are going to filter only <div> 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").click(function(){
         $( ".child-two" ).parents("div").css( "border", "2px solid red" );
      });
   });
</script>
<style>
   .great-grand-parent *{display:block; border:2px solid #aaa; color:#aaa; padding:5px; margin:5px;}
</style>
</head>
<body>
   <div style="width:525px;" class="great-grand-parent">
      <div style="width:500px;" class="grand-parent">
         <ul class="parent">
            <li class="child-one">Child One</li>
            <li class="child-two">Child Two</li>
         </ul>
      </div>
    </div>
   <br>
   <button>Mark Parents</button>
</body>
</html>

jQuery parentsUntil() Method

jQuery parentsUntil() 方法返回两个选择器之间可用的所有祖先元素。以下为该方法的简单语法：

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])

我们还可以选择在方法中提供 filter 选择器。如果提供了过滤器，则元素将通过测试它们是否与过滤器匹配来进行过滤。

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

Synopsis

考虑以下 HTML 内容：

Consider the following HTML content:

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

现在，如果我们像下面这样使用 parentsUntil() 方法：

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

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

将会产生以下结果：

It will produce following result:

<div class="great-grand-parent">
   <div class="grand-parent" style="border:2px solid red">
      <ul class="parent" style="border:2px solid red">
         <li class="child-one">Child One</li>
         <li class="child-two">Child Two</li>
      </ul>
   </div>
</div>

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").click(function(){
         $( ".child-two" ).parentsUntil(".great-grand-parent").css( "border", "2px solid red" );
      });
   });
</script>
<style>
   .great-grand-parent, .great-grand-parent *{display:block; border:2px solid #aaa; color:#aaa; padding:5px; margin:5px;}
</style>
</head>
<body>
   <div style="width:525px;" class="great-grand-parent">
      <div style="width:500px;" class="grand-parent">
         <ul class="parent">
            <li class="child-one">Child One</li>
            <li class="child-two">Child Two</li>
         </ul>
      </div>
    </div>
   <br>
   <button>Mark Parents</button>
</body>
</html>

jQuery Traversing Reference

您可以在以下页面获得所有 jQuery 方法的完整引用以遍历 DOM： 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.