jQuery - 後代元素遍歷

jQuery 提供了方法來遍歷 DOM 樹中的向下路徑，以查詢給定元素的後代元素。這些方法可用於查詢給定元素在 DOM 中的子元素、孫元素、曾孫元素等等。

以下三種方法可用於遍歷 DOM 樹中的向下路徑

children() - 返回匹配元素的所有直接子元素。
find() - 返回匹配元素的所有後代元素。

children() 方法與 find() 方法的不同之處在於，children() 僅向下遍歷 DOM 樹一層，而 find() 方法可以向下遍歷多層以選擇後代元素（子元素、孫元素、曾孫元素等）。

jQuery children() 方法

jQuery 的 children() 方法返回匹配元素的所有直接子元素。以下是該方法的簡單語法

$(selector).children([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://tutorialspoint.tw/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() 方法

jQuery 的 find() 方法返回匹配元素的所有後代元素。以下是該方法的簡單語法

$(selector).find([ilter)

此處，篩選器 選擇器對於此方法是必需的。要返回匹配元素的所有後代元素，我們需要傳遞 * 作為篩選器，否則，如果篩選器作為元素提供，則元素將透過測試是否與之匹配來進行篩選。

概述

考慮以下 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://tutorialspoint.tw/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 遍歷參考

您可以在以下頁面獲取所有 jQuery 方法遍歷 DOM 的完整參考：jQuery 遍歷參考。

列印頁面