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.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 到所有匹配的元素。

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

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.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 遍历参考

您可以在以下页面获得所有 jQuery 遍历 DOM 方法的完整参考：jQuery 遍历参考。

打印页面