jQuery 后代元素

jQuery DOM 遍历: 查找后代元素

DOM 遍历（traversal）意味着通过 HTML 文档的结构来查找特定元素，基于它们与其他元素的关系。

‘后代元素’（descendant）是指嵌套在另一个元素内的任何元素，无论深度如何——可以是子元素、孙元素、曾孙元素等等。jQuery 提供了高效的方法来查找这些后代元素。

向下遍历 DOM 树

查找后代元素的两个主要 jQuery 方法是:

• .children(): 仅查找直接子元素（向下探一层）。
• .find(): 查找所有匹配选择器的后代元素，无论嵌套多深。

jQuery 的 .children() 方法

.children() 方法返回匹配集合中每个元素的直接子元素的集合。它仅向下遍历 DOM 树一层。

想象一下家谱: .children() 只查找你的直系儿女，不包括孙辈。

示例 HTML:

<div class="container">
  <p>Paragraph 1 (direct child)</p>
  <span>Span 1 (direct child)</span>
  <ul> <!-- Direct child -->
    <li>List item (grandchild)</li>
  </ul>
</div>

示例 jQuery:

// 获取 class 为 "container" 的 div 的所有直接子元素
let directChildren = $(".container").children();
// directChildren 将包含 <p>, <span> 和 <ul> 元素

// 可选地按选择器过滤子元素:
// 仅获取直接子元素中的 <p> 元素
let pChildren = $(".container").children("p");
// pChildren 将只包含那个 <p> 元素

jQuery 的 .find() 方法

.find() 方法搜索选中元素的所有后代（子、孙等），并返回与提供选择器匹配的元素集合。

沿用家谱的比喻: .find() 向下搜索你整个血脉中符合条件的任何人。

示例 HTML (同上):

<div class="container">
  <p>Paragraph 1 (direct child)</p>
  <span>Span 1 (direct child)</span>
  <ul> <!-- Direct child -->
    <li>List item (grandchild)</li>
  </ul>
</div>

示例 jQuery:

// 查找容器内任何位置的所有 <li> 元素
let listItems = $(".container").find("li");
// listItems 将包含那个 <li> 元素

// 查找容器内所有后代元素 (任何标签)
let allDescendants = $(".container").find("*");
// allDescendants 将包含 <p>, <span>, <ul> 和 <li> 元素

选择 .children() 还是 .find():

• 当你只需要直接嵌套在下一层级的元素时，使用 .children()。
• 当你需要更深层地搜索元素结构中匹配选择器的后代元素时，使用 .find()。通常，.find() 在页面特定区域内进行搜索时更通用。

进一步学习

jQuery 还提供了许多其他遍历方法，用于横向移动（同级元素 siblings）和向上移动（祖先元素 ancestors）。请查阅官方 jQuery API 文档中关于遍历（Traversing）的部分，以获取完整参考。