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(index2){returnfalse;// 中断遍历类似 break}});2. 跳过当前迭代$(li).each(function(index){if(index%20){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%20){$(this).addClass(row-even);}});3. 条件遍历$(li).each(function(){vartext$(this).text();if(text.length10){$(this).addClass(long-text);}});六、注意事项索引从 0 开始所有索引都是基于 0 的返回 jQuery 对象大多数遍历方法返回 jQuery 对象支持链式调用性能考虑避免在循环中重复选择器操作DOM 操作优化批量修改 DOM 比逐个修改性能更好这些笔记涵盖了 jQuery 遍历的核心概念和常用技巧适合日常开发参考使用。