极客教程jQuery 遍历祖先元素
jQuery提供了一些方法用于遍历DOM树，以找到给定元素的祖先元素。这些方法可以用于在DOM中找到父元素、祖父元素、曾祖父元素等。
以下是在DOM树中向上遍历的三种方法：
- parent() - 返回每个匹配元素的直接父元素。
-
parents() - 返回匹配元素的所有祖先元素。
-
parentsUntil() - 返回找到给定选择器参数的元素之前的所有祖先元素。
jQuery parent()方法
jQuery parent() 方法返回每个匹配元素的直接父元素。以下是该方法的简单语法：
$(selector).parent([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>
现在，如果我们使用 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://www.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()方法返回一个包含文档的集合，而$(“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://www.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://www.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>