jQuery遍历中的使用技巧-CFANZ编程社区

jQuery 遍历是指根据元素在 DOM 树中的关系（如祖先、后代、同胞）来查找或选择 HTML 元素的过程。以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止。下面详细介绍 jQuery 中常用的遍历方法及代码示例。

一、祖先遍历（向上遍历）

1. parent() - 获取直接父元素

// 获取每个 <li> 元素的直接父元素（即 <ul>）
$("li").parent().css("border", "2px solid red");

2. parents() - 获取所有祖先元素

// 获取每个 <p> 元素的所有祖先元素
$("p").parents().css("border", "2px solid red");

3. parentsUntil() - 获取指定范围内的祖先元素

// 获取 <p> 元素的所有祖先元素，直到遇到 <div> 为止
$("p").parentsUntil("div").css("border", "2px solid red");

4. closest() - 获取最近的匹配祖先元素

// 从 <div> 开始，向上查找最近的 <li> 元素
$("div").closest("li").css("background", "#f00");

注意：closest() 从当前元素开始向上查找，找到第一个匹配的元素就停止；而 parents() 会一直查找到根元素。

二、后代遍历（向下遍历）

1. children() - 获取直接子元素

// 获取每个 <div> 的直接子元素
$("div").children().css("color", "blue");

// 获取 <div> 中类名为 "1" 的所有 <p> 元素
$("div").children("p.1").css("font-weight", "bold");

2. find() - 获取所有后代元素

// 获取 <div> 的所有 <span> 后代元素
$("div").find("span").css("background", "#ff0");

// 获取 <div> 的所有后代元素
$("div").find("*").css("opacity", "0.5");

注意：children() 只查找直接子元素，而 find() 会查找所有后代元素。

三、同胞遍历（水平遍历）

1. siblings() - 获取所有同胞元素

// 获取每个 <h2> 的所有同胞元素
$("h2").siblings().css("background", "#ccc");

2. next() - 获取下一个同胞元素

// 获取每个 <p> 的下一个同胞元素
$("p").next().css("font-weight", "bold");

3. nextAll() - 获取所有后续同胞元素

// 获取 <p> 之后的所有同胞元素
$("p").nextAll().css("color", "green");

4. nextUntil() - 获取指定范围内的后续同胞元素

// 获取 <p> 之后的所有同胞元素，直到遇到 <div> 为止
$("p").nextUntil("div").css("text-decoration", "underline");

5. prev() - 获取上一个同胞元素

// 获取每个 <p> 的上一个同胞元素
$("p").prev().css("font-style", "italic");

6. prevAll() - 获取所有前序同胞元素

// 获取 <p> 之前的所有同胞元素
$("p").prevAll().css("font-size", "14px");

7. prevUntil() - 获取指定范围内的前序同胞元素

// 获取 <p> 之前的所有同胞元素，直到遇到 <div> 为止
$("p").prevUntil("div").css("text-align", "right");

四、遍历集合方法

1. each() - 遍历 jQuery 对象

// 遍历所有 <li> 元素
$("li").each(function(index, element) {
  console.log(index + ": " + $(element).text());
});

// 或者
$("li").each(function() {
  console.log($(this).text());
});

2. filter() - 过滤集合

// 过滤出类名为 "active" 的元素
$("li").filter(".active").css("color", "red");

3. add() - 添加元素到集合

// 将 <h2> 添加到当前集合中
$("li").add("h2").css("font-weight", "bold");

4. addBack() - 添加之前的状态

// 先过滤，再添加之前的状态
$("li").filter(".active").addBack().css("border", "1px solid black");

五、DOM 遍历方法示意图

<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>

$("li").parent() → 返回 .son 元素（直接父元素）
$("li").parents() → 返回 .son 和 .div（所有祖先元素）
$("li").closest(".div") → 返回 .div 元素（最近的匹配祖先）
$("div").children() → 返回 .son 元素（直接子元素）
$("div").find(".grandson") → 返回 .grandson 元素（所有后代）
$("li").siblings() → 返回 .son 的其他元素（如果有的话）