极客教程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://www.tutorialspoint.com/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)
这里的 filter 选择器对于这个方法来说是必需的。为了返回匹配元素的所有后代，我们需要将 li 作为过滤器传递，否则如果过滤器被提供为元素，则元素将通过测试是否与它匹配来被过滤。
概述
考虑以下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.tutorialspoint.com/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>