jquery遍历

jQuery遍历方法

jQuery提供了多种遍历DOM元素的方法，以下是常用的遍历方式：

each()方法

使用each()可以遍历匹配的元素集合，对每个元素执行回调函数。

$("li").each(function(index, element) {
  console.log(index + ": " + $(element).text());
});

find()方法

在匹配元素的后代中查找符合选择器的元素。

$("ul").find("li").css("color", "red");

children()方法

获取匹配元素的直接子元素。

$("ul").children().css("background-color", "yellow");

parent()和parents()方法

parent()获取直接父元素，parents()获取所有祖先元素。

$("li").parent().css("border", "1px solid black");
$("li").parents("div").addClass("highlight");

siblings()方法

获取匹配元素的所有兄弟元素。

$("li.active").siblings().css("color", "blue");

next()和prev()方法

next()获取下一个兄弟元素，prev()获取上一个兄弟元素。

$("li.active").next().addClass("next-item");
$("li.active").prev().addClass("prev-item");

filter()方法

从匹配元素集合中筛选出符合条件的元素。

$("li").filter(".active").css("font-weight", "bold");

map()方法

通过函数处理匹配元素集合，返回新的jQuery对象。

var texts = $("li").map(function() {
  return $(this).text();
}).get();
console.log(texts);

遍历链式操作

jQuery方法可以链式调用，提高代码简洁性。

$("ul")
  .find("li")
  .css("color", "green")
  .end()
  .children(".active")
  .css("background", "yellow");

这些方法提供了灵活的方式来遍历和操作DOM元素，适用于各种前端开发场景。