jQuery 遍历

jQuery DOM 遍历

什么是 DOM 遍历？

遍历（Traversing）意味着“穿过”或“移动”。在 HTML 文档对象模型（DOM - Document Object Model）的上下文中，遍历是指在相关的元素之间导航。从一个选定的元素（或一组元素）开始，你可以使用 jQuery 的遍历方法来查找它的父元素（parent）、子元素（children）、同级元素（siblings）或其他相关元素。

将 DOM 想象成一个表示 HTML 文档的树状结构。遍历允许你在这个树中向上（朝向祖先元素）、向下（朝向后代元素）和横向（在同级元素之间）移动。

可视化 DOM 结构

考虑以下 HTML 片段：

<div class="container">
  <p>Introduction paragraph.</p>
  <ul>
    <li>Item 1 <span>(details)</span></li>
    <li class="active">Item 2</li>
    <li>Item 3 **(important)**</li>
  </ul>
  <p>Conclusion paragraph.</p>
</div>

此结构中的关系：

• <div class="container"> 是两个 <p> 元素和 <ul> 元素的父元素。它是其内部所有元素的祖先元素。
• <ul> 元素是 <div> 的子元素，也是三个 <li> 元素的父元素。
• 第一个 <li> 是 <ul> 的子元素，是 <div> 的后代元素，也是 <span> 的父元素。
• <span> 是第一个 <li> 的子元素，也是 <ul> 和 <div> 的后代元素。
• 这三个 <li> 元素是同级元素，因为它们拥有相同的父元素（<ul>）。
• 这些 <p> 元素也是同级元素。
• ** 元素是第三个 <li> 的子元素。

关键术语：

• 父元素（Parent）：直接包含当前元素的元素。
• 子元素（Child）：直接包含在当前元素内部的元素。
• 祖先元素（Ancestor）：一个元素的父元素，或父元素的父元素等，一直向上直到 <html> 元素。
• 后代元素（Descendant）：一个元素的子元素，或子元素的子元素等。
• 同级元素（Siblings）：共享同一父元素的元素。

使用 jQuery 进行遍历

jQuery 提供了一组丰富的专门用于 DOM 遍历的方法，可以轻松地根据元素与其他元素的关系来选择元素。

这些方法通常根据遍历方向进行分类：

• **向上遍历（祖先元素）：**例如 .parent()、.parents()、.closest()、.parentsUntil() 等方法。
• **向下遍历（后代元素）：**例如 .children()、.find() 等方法。
• **横向遍历（同级元素）：**例如 .siblings()、.next()、.prev()、.nextAll()、.prevAll()、.nextUntil()、.prevUntil() 等方法。

此外，还有一些过滤方法（.first()、.last()、.eq()、.filter()、.not()、.has()）用于缩小选择或遍历结果的范围。

后续章节将通过示例来探讨这些方法。

jQuery 遍历参考

有关所有 jQuery 遍历方法的完整列表和详细解释，请查阅官方 jQuery API 文档中“Traversing”（遍历）类别下的内容。