jQuery - 遍歷祖先元素

jQuery 提供了在 DOM 樹中向上遍歷以查詢給定元素祖先元素的方法。這些方法可用於查詢給定元素在 DOM 中的父元素、祖父母元素、曾祖父母元素等等。

在 DOM 樹中向上遍歷有以下三種方法：

parent() - 返回每個匹配元素的直接父元素。
parents() - 返回匹配元素的所有祖先元素。
parentsUntil() - 返回所有祖先元素，直到找到作為選擇器引數給出的元素。

jQuery parent() 方法

jQuery parent() 方法返回每個匹配元素的直接父元素。以下是該方法的簡單語法：

$(selector).parent([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>

現在，如果我們按如下方式使用parent()方法：

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

它將產生以下結果：

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

示例

讓我們嘗試以下示例並驗證結果：

<!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(){
         $( ".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 到所有匹配的元素。

jQuery parents() 方法

jQuery parents() 方法返回匹配元素的所有祖先元素。以下是該方法的簡單語法：

$(selector).parents([filter])

我們可以在方法中可選地提供一個篩選器選擇器。如果提供了篩選器，則將透過測試元素是否與之匹配來篩選元素。

parents() 和 parent() 方法類似，區別在於 parent() 方法只向上遍歷 DOM 樹一級。此外，$( "html" ).parent() 方法返回包含 document 的集合，而 $( "html" ).parents() 返回空集合。

摘要

考慮以下 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>

現在，如果我們按如下方式使用parents()方法：

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

它將產生以下結果：

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

示例

讓我們嘗試以下示例並驗證結果。為了清晰起見，我們將在此處僅篩選 <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(){
         $( ".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() 方法

jQuery parentsUntil() 方法返回兩個選擇器之間可用的所有祖先元素。以下是該方法的簡單語法：

$(selector1).parentsUntil([selector2][,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>

現在，如果我們按如下方式使用parentsUntil()方法：

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

它將產生以下結果：

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

示例

讓我們嘗試以下示例並驗證結果：

<!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(){
         $( ".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 遍歷參考

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

列印頁面