jQuery 提供了丰富的遍历方法，帮助你在 DOM 树中查找、过滤和操作元素。下面详细介绍常用的遍历方法及其用法：

1. 遍历集合

  • .each()
    用于遍历匹配集合中的每个元素，常用于对集合中的每个元素执行某种操作。 $("li").each(function(index, element) { console.log("索引：" + index + "，内容：" + $(element).text()); });

2. 查找后代元素

  • .find()
    在匹配元素的所有后代中查找指定选择器的元素（包括子孙元素）。 $("#container").find("p").css("color", "blue");

3. 获取子元素

  • .children()
    只返回匹配元素的直接子元素（一级子节点）。 $("#container").children("div").addClass("child-div");

4. 获取祖先元素

  • .parent()
    返回每个匹配元素的直接父元素。 $(".child").parent().css("border", "1px solid red");
  • .parents()
    返回每个匹配元素的所有祖先元素，直到根节点。 $(".child").parents("div").css("background", "lightgray");
  • .closest()
    从当前元素开始，向上逐级查找第一个匹配的元素（包含自身）。 $(".child").closest("div").css("padding", "10px");

5. 获取同级元素

  • .siblings()
    返回匹配元素的所有同级兄弟元素（不包括自身）。 $(".active").siblings().css("opacity", 0.5);
  • **.next() 和 .prev()
    分别返回紧接在当前元素之后或之前的同级元素。 $(".item").next().css("color", "green"); $(".item").prev().css("color", "blue");
  • **.nextAll() 和 .prevAll()
    分别返回当前元素之后或之前的所有同级元素。 $(".item").nextAll().css("font-weight", "bold");

6. 筛选和过滤

  • .filter()
    根据指定的选择器或函数过滤匹配集合，只保留符合条件的元素。 $("li").filter(".selected").css("background", "yellow");
  • .not()
    反向筛选，排除匹配集合中符合条件的元素。 $("li").not(".selected").css("background", "gray");
  • .eq(index)
    根据索引获取匹配集合中的特定元素，索引从 0 开始。 $("li").eq(2).css("font-weight", "bold");
  • **.first() 和 .last()
    分别返回集合中的第一个和最后一个元素。 $("p").first().css("font-size", "24px"); $("p").last().css("font-size", "12px");

7. 其他有用方法

  • .contents()
    返回匹配元素的所有子节点，包括文本节点（常用于处理 iframe 内部文档）。 $("iframe").contents().find("body").css("background", "pink");
  • .end()
    结束当前的链式操作，返回到上一次的 jQuery 对象。 var items = $("div").find("p").css("color", "red").end();

这些遍历方法可以灵活组合使用，帮助你高效地在页面中定位、筛选和操作元素。无论是简单的样式更改