笙亿网络策划

jQuery怎么遍历后代元素？

约 12 分钟读完 30 阅
文章导读
Previous Quiz Next jQuery 提供了方法来在 DOM 树中向下遍历，找到给定元素的后代元素。这些方法可用于找到 DOM 中给定元素的子元素、孙元素、曾孙元素等。
📋 目录
  1. A jQuery children() 方法
  2. B jQuery find() 方法
  3. C jQuery Traversing 参考
A A

jQuery - 遍历后代元素

Previous
Quiz
Next

jQuery 提供了方法来在 DOM 树中向下遍历，找到给定元素的后代元素。这些方法可用于找到 DOM 中给定元素的子元素、孙元素、曾孙元素等。

在 DOM 树中向下遍历有以下三种方法：

  • children() - 返回匹配元素的直接子元素。

  • find() - 返回匹配元素的所有后代元素。

children() 方法与 find() 的区别在于，children() 只向下遍历 DOM 树的一个层级，而 find() 方法可以遍历多个层级来选择后代元素（子元素、孙元素、曾孙元素等）。

jQuery children() 方法

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

$(selector).children([filter])

我们可以在方法中可选地提供 filter 选择器。如果提供了 filter，则会通过测试元素是否匹配该选择器来过滤元素。

示例说明

考虑以下 HTML 内容：

<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() 方法：

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

将产生以下结果：

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

示例

请尝试以下示例并验证结果：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.example.com"></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() 方法

jQuery 的 find() 方法返回匹配元素的全部后代元素。以下是该方法的简单语法：

$(selector).find([ilter)

这里的 filter 选择器是该方法的必需参数。要返回匹配元素的全部后代元素，我们需要将 * 作为 filter 参数传递；否则，如果提供了元素作为 filter 参数，则会通过测试这些元素是否匹配该 filter 来过滤元素。

概要

考虑以下 HTML 内容：

<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") 方法：

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

它将产生以下结果：

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

示例

让我们尝试以下示例并验证结果：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.example.com"></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 参考

您可以在以下页面获取所有用于遍历 DOM 的 jQuery 方法的完整参考：jQuery Traversing Reference。