jQuery DOM 遍历详解

本文详细介绍常见的jQuery DOM遍历方法。

1. 遍历子元素

基于当前元素查找子元素

// 查找直接子元素
$("ul").children();              // 获取ul的所有直接子元素li
$("ul").children(".active");     // 获取类名为active的直接子元素// 查找所有后代元素
$("div").find("p");              // 获取div内的所有p元素
$("div").find("*");              // 获取div内的所有元素// 筛选特定子元素
$("ul li").eq(2);                // 获取第3个li元素（索引从0开始）
$("ul li").first();              // 获取第一个li
$("ul li").last();               // 获取最后一个li

2. 遍历父元素

基于当前元素查找父元素

// 获取直接父元素
$("span").parent();              // 获取span的直接父元素// 获取所有祖先元素
$("li").parents();               // 获取所有祖先元素
$("li").parents("ul");           // 获取所有ul类型的祖先元素// 获取最近的祖先元素（向上查找第一个匹配的元素）
$("li").closest("div");          // 查找最近的div祖先元素

3. 遍历兄弟元素

基于当前元素查找同级元素

// 获取下一个兄弟元素
$("h2").next();                  // 获取h2后的下一个元素
$("h2").nextAll();               // 获取h2后的所有兄弟元素
$("h2").nextUntil("h3");         // 获取h2到h3之间的所有兄弟元素// 获取前一个兄弟元素
$("p").prev();                   // 获取p前的一个元素
$("p").prevAll();                // 获取p前的所有兄弟元素
$("p").prevUntil("div");         // 获取p到div之间的所有兄弟元素// 获取所有兄弟元素
$("li").siblings();              // 获取li的所有兄弟元素
$("li").siblings(".selected");   // 获取类名为selected的兄弟元素

4. 筛选元素

基于条件筛选元素集合

// 过滤元素
$("li").filter(".active");       // 筛选出类名为active的li
$("li").filter(function(index) {return index % 2 === 0;        // 筛选偶数索引的li
});// 排除元素
$("li").not(".ignore");          // 排除类名为ignore的li// 切片选择
$("li").slice(2, 5);             // 选择索引2到4的li

5. 遍历元素集合

使用 each() 方法迭代处理每个元素

// 基本遍历
$("li").each(function(index, element) {console.log(index + ": " + $(this).text());
});// 修改每个元素
$("input").each(function() {$(this).val($(this).val().toUpperCase());
});// 遍历并返回新数组
const texts = $("p").map(function() {return $(this).text();
}).get(); // ["文本1", "文本2", ...]

← 上一篇 AngularJS知识快速入门（上）

记得点赞、关注、收藏哦！

下一篇 Ajax——在OA系统提升性能的局部刷新 →