Jquery 简明教程

jQuery - Traversing Descendants

jQuery 提供了在 DOM 树内向下遍历的方法，以查找给定元素的后代。这些方法可用于查找 DOM 内某个元素的子元素、孙元素、曾孙元素，以此类推。

jQuery provides methods to traverse downwards inside the DOM tree to find descendant(s) of a given element. These methods can be used to find a child, grandchild, great-grandchild, and so on for a given element inside the DOM.

以下这三个方法可以遍历 DOM 树向下：

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

children() - returns all the direct children of the matched element.
find() - returns all the descendant elements of the matched element.

children() 方法不同于 find() 之处在于 children() 仅向下移动 DOM 树一个级别，而 find() 方法可以向下移动多个级别选择后代元素（子级、孙级、曾孙级等）。

The children() method differs from find() in that children() only travels a single level down the DOM tree where as find() method can traverse down multiple levels to select descendant elements (children, grandchildren, great-grandchildren etc.) as well.

jQuery children() Method

jQuery children() 方法返回与匹配元素的直接子元素。该方法的简单语法如下：

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

$(selector).children([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 class="grand-parent">
      <ul class="parent">
         <li class="child-three">Child Three</li>
         <li class="child-four">Child Four</li>
      </ul>
   </div>
</div>

现在，如果我们按照以下方法使用 children() 方法：

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

$( ".great-grand-parent" ).children().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">
         <li class="child-one">Child One</li>
         <li class="child-two">Child Two</li>
      </ul>
   </div>
   <div class="grand-parent" style="border:2px solid red">
      <ul class="parent">
         <li class="child-three">Child Three</li>
         <li class="child-four">Child Four</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(){
         $( ".great-grand-parent" ).children().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 class="grand-parent" style="width:500px;">
         <ul class="parent">
            <li class="child-one">Child One</li>
            <li class="child-two">Child Two</li>
         </ul>
      </div>
      <div class="grand-parent" style="width:500px;">
         <ul class="parent">
            <li class="child-three">Child Three</li>
            <li class="child-four">Child Four</li>
         </ul>
      </div>
   </div>
   <br>
   <button>Mark Children</button>
</body>
</html>

jQuery find() Method

jQuery find() 方法返回与匹配元素的所有后代。该方法的简单语法如下：

The jQuery find() method returns all descendants of the matched element. Following is a simple syntax of the method:

$(selector).find([ilter)

对于该方法， filter 选择器是必需的。为了返回与匹配元素的所有后代，我们需要传递 * 作为过滤器，否则如果将过滤器作为元素提供，则将通过测试元素是否与过滤器匹配来对其进行过滤。

Here filter selector is mandatory for this method. To return all the descendants of the matched element, we need to pass * as a filter otherwise if the filter is supplied as an element, 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 class="grand-parent">
      <ul class="parent">
         <li class="child-three">Child Three</li>
         <li class="child-four">Child Four</li>
      </ul>
   </div>
</div>

现在，如果我们按照以下方法使用 find("li") 方法：

Now if we use the find("li") method as follows:

$( ".grand-parent" ).find("li").css( "border", "2px solid red" );

将会产生以下结果：

It will produce following result:

<div class="great-grand-parent">
   <div class="grand-parent">
      <ul class="parent">
         <li class="child-one"  style="border:2px solid red">Child One</li>
         <li class="child-two"  style="border:2px solid red">Child Two</li>
      </ul>
   </div>
   <div class="grand-parent" style="border:2px solid red">
      <ul class="parent">
         <li class="child-three"  style="border:2px solid red">Child Three</li>
         <li class="child-four"  style="border:2px solid red">Child Four</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(){
         $( ".grand-parent" ).find("li").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 class="grand-parent" style="width:500px;">
         <ul class="parent">
            <li class="child-one">Child One</li>
            <li class="child-two">Child Two</li>
         </ul>
      </div>
      <div class="grand-parent" style="width:500px;">
         <ul class="parent">
            <li class="child-three">Child Three</li>
            <li class="child-four">Child Four</li>
         </ul>
      </div>
   </div>
   <br>
   <button>Mark Children</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.