jquery 遍历

jQuery 遍历方法

jQuery 提供了多种遍历 DOM 元素的方法，可以方便地查找和操作元素。以下是常见的遍历方法：

遍历祖先元素

• parent()：获取直接父元素。
• parents()：获取所有祖先元素，可传入选择器筛选。
• parentsUntil()：获取介于两个元素之间的祖先元素。

示例代码：

$("span").parent(); // 返回 span 的直接父元素
$("span").parents("div"); // 返回 span 的所有 div 祖先元素
$("span").parentsUntil("div"); // 返回 span 到 div 之间的祖先元素

遍历后代元素

• children()：获取所有直接子元素，可传入选择器筛选。
• find()：获取所有后代元素，需传入选择器。

示例代码：

$("div").children(); // 返回 div 的所有直接子元素
$("div").find("span"); // 返回 div 下所有 span 元素

遍历兄弟元素

• siblings()：获取所有兄弟元素，可传入选择器筛选。
• next()：获取下一个兄弟元素。
• nextAll()：获取之后的所有兄弟元素。
• nextUntil()：获取介于两个元素之间的兄弟元素。
• prev()：获取上一个兄弟元素。
• prevAll()：获取之前的所有兄弟元素。
• prevUntil()：获取介于两个元素之间的兄弟元素。

示例代码：

$("h2").siblings(); // 返回 h2 的所有兄弟元素
$("h2").next(); // 返回 h2 的下一个兄弟元素
$("h2").nextUntil("h6"); // 返回 h2 到 h6 之间的兄弟元素

过滤元素

• first()：获取第一个匹配元素。
• last()：获取最后一个匹配元素。
• eq()：获取指定索引位置的元素。
• filter()：筛选匹配选择器的元素。
• not()：筛选不匹配选择器的元素。

示例代码：

$("div").first(); // 返回第一个 div 元素
$("div").eq(2); // 返回索引为 2 的 div 元素
$("div").filter(".intro"); // 返回 class 为 intro 的 div 元素

遍历函数

jQuery 还提供了遍历函数，如 each()，用于迭代元素集合：

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

以上方法可以根据具体需求组合使用，灵活地遍历和操作 DOM 元素。