jQuery 遍历

jQuery 遍历学习笔记

一、基础遍历方法

1.each()方法

// 基本语法$(selector).each(function(index,element){// index: 当前元素的索引// element: 当前 DOM 元素});// 示例：遍历所有 div$("div").each(function(index,element){console.log("第"+index+"个 div: "+$(element).text());});

2.$.each()方法（通用遍历）

// 遍历数组$.each([1,2,3],function(index,value){console.log(index+": "+value);});// 遍历对象$.each({name:"张三",age:25},function(key,value){console.log(key+": "+value);});

二、遍历控制

1. 中断遍历

$("li").each(function(index){if(index===2){returnfalse;// 中断遍历（类似 break）}});

2. 跳过当前迭代

$("li").each(function(index){if(index%2===0){return;// 跳过当前迭代（类似 continue）}console.log($(this).text());});

三、常用遍历相关方法

1. 父子关系遍历

// 获取子元素$("ul").children("li");// 直接子元素$("ul").find("li");// 所有后代元素// 获取父元素$("li").parent();// 直接父元素$("li").parents("ul");// 所有祖先元素$("li").parentsUntil("body");// 直到指定元素的祖先// 获取兄弟元素$("li").siblings();// 所有兄弟元素$("li").siblings(".active");// 特定选择器的兄弟元素

2. 同级遍历

// 获取下一个元素$("li").next();// 下一个兄弟元素$("li").nextAll();// 后面所有兄弟元素$("li").nextUntil("li:last");// 直到指定元素前的兄弟元素// 获取上一个元素$("li").prev();// 上一个兄弟元素$("li").prevAll();// 前面所有兄弟元素$("li").prevUntil("li:first");// 直到指定元素前的兄弟元素

3. 筛选与映射

// 筛选元素$("li").filter(".active");// 保留匹配的元素$("li").not(".inactive");// 移除匹配的元素// 映射转换vartexts=$("li").map(function(){return$(this).text();}).get();// 转换为普通数组

四、实用技巧

1. 使用this关键字

$("li").each(function(){// this 指向当前 DOM 元素$(this).addClass("visited");});

2. 链式调用

$("ul").children("li").filter(":even").addClass("even").end().filter(":odd").addClass("odd");

3. 性能优化

// 缓存 jQuery 对象var$items=$("li");$items.each(function(){// 重复使用 $items 而不是重新选择});

五、常见应用场景

1. 表单数据收集

varformData={};$("input, select, textarea").each(function(){formData[this.name]=$(this).val();});

2. 动态列表处理

$("tr").each(function(index){$(this).data("index",index);if(index%2===0){$(this).addClass("row-even");}});

3. 条件遍历

$("li").each(function(){vartext=$(this).text();if(text.length>10){$(this).addClass("long-text");}});

六、注意事项

1. 索引从 0 开始：所有索引都是基于 0 的
2. 返回 jQuery 对象：大多数遍历方法返回 jQuery 对象，支持链式调用
3. 性能考虑：避免在循环中重复选择器操作
4. DOM 操作优化：批量修改 DOM 比逐个修改性能更好

这些笔记涵盖了 jQuery 遍历的核心概念和常用技巧，适合日常开发参考使用。