jQuery each遍历DOM与return false终止

脚本专家

在 jQuery 项目里，选择器返回的通常不是单个原生 DOM，而是包含一组 DOM 元素的 jQuery 包装对象。要逐个处理集合中的元素，实例方法 $(selector).each() 是高频入口；它的回调参数、this 指向、返回值以及循环控制方式，和原生数组遍历并不完全相同。

一、方法签名与回调参数
$(selector).each(function(index, domEle){...}) 用于遍历 jQuery 对象集合。回调第一个参数 index 是当前元素索引，从 0 开始；第二个参数 domEle 是当前遍历到的原生 DOM 对象，等价于回调内部的 this。若要在回调里调用 jQuery 方法，需要先包装成 $(domEle) 或 $(this)。

2. $('li').each(function(index, domEle){
3.     console.log(index);
4.     console.log(domEle.innerText);
5.     console.log($(this).text());
6. });

复制代码

这里 domEle 可以直接读取原生属性，例如 innerText；$(this).text() 则走 jQuery API。不要把 domEle 当成 jQuery 对象直接调用 .text() 等方法，这是常见错误来源。

二、返回值和链式调用
$(selector).each() 的返回值始终是调用它的 jQuery 对象，而不是回调函数的 return 值。因此 each 执行完还能继续链式调用其他 jQuery 方法。

2. $('li').each(function(i, el){
3.     console.log(i, el.innerHTML);
4. }).css('color','red');

复制代码

上面代码先遍历 li，再统一设置颜色。理解这一点有助于排查“为什么 each 回调里的 return 拿不到”的问题：回调返回值只用于控制 each 的遍历行为，不会成为方法返回值。

三、终止与跳过：不要写 break 和 continue
在 each 回调里不能直接写 break 或 continue，原文指出这样会报语法错误。jQuery 用 return 模拟原生循环控制：return false 终止全部循环，相当于 break；return true 跳过本次循环，相当于 continue。

2. $('li').each(function(index){
3.     console.log(index);
4.     if(index === 2){
5.         return false;
6.     }
7. });

复制代码

2. $('li').each(function(index){
3.     if(index === 1){
4.         return true;
5.     }
6.     console.log(index);
7. });

复制代码

排查这类问题时，先看回调中是否误写了 break/continue，再确认 return false 和 return true 是否放在正确的条件分支中。

四、区分 $(selector).each() 与 $.each()
$(selector).each() 是 jQuery 对象方法，面向 DOM 元素集合；$.each(obj, callback) 是静态工具方法，可遍历数组和普通对象，不限于 DOM。开发中批量操作 DOM 优先用前者，遍历普通数组或对象用后者。

2. $.each([10,20,30], function(i, val){
3.     console.log(i, val);
4. });

复制代码

两者名字相近，但调用方式和适用对象不同，混用容易造成回调参数理解偏差。

五、和原生 Array.forEach 的对比
Array.forEach 只能遍历数组，不能直接遍历 jQuery 对象集合，返回 undefined，回调内部 return 也不能终止循环。$(selector).each() 专门处理 jQuery 包装的 DOM 集合，返回 jQuery 对象并支持链式调用，还能通过 return false/true 表达 break/continue 逻辑。维护老项目时，这种差异尤其需要注意。

六、业务场景：条件命中后停止批量样式处理
需求是批量给列表项设置背景色，遇到 item3 就停止，后面的 item4 不再执行。

2. <ul>
3.     <li>item1</li>
4.     <li>item2</li>
5.     <li>item3</li>
6.     <li>item4</li>
7. </ul>

复制代码

2. $('ul li').each(function(idx, ele){
3.     let text = $(ele).text();
4.     if(text === 'item3'){
5.         return false;
6.     }
7.     $(ele).css('background-color','#eee');
8. });

复制代码

该示例同时体现了三点：用 index/idx 判断位置或配合业务条件；用 $(ele) 把原生 DOM 转为 jQuery 对象；用 return false 提前结束遍历。

七、适用场景与注意点
$(selector).each() 适合 jQuery 对象集合的批量 DOM 操作、条件筛选后处理、链式样式或属性设置。它不会把回调 return 值作为方法返回值；回调中的 domEle 和 this 都是原生 DOM；终止和跳过必须用 return false/true。ES6+ 场景下可以把 jQuery 对象转数组后用 for...of，但原文也指出，在老项目维护中 each() 依然是高频 API。掌握这些参数含义和返回行为，能减少遍历中断、链式调用失效和 DOM 包装错误等排查成本。

热心网友6

楼主这篇梳理得很到位，尤其是把 each 的返回值、this 指向和 return false/true 这三个容易混淆的点分开了讲，对我这种经常在老项目里翻 jQuery 代码的人很实用。 补充一点自己踩坑后的体会：第六节的例子，item3 是在设置背景色之前就 return false 了，所以 item3 本身不会被染色，item4 及后面的也被终止。如果业务上希望 item3 也变色只是不再处理后面的，就把设置样式那行放到判断前面，或者判断里先设色再 return false。这个细节帖子没明说，但实际写的时候很容易看漏。 另外第二节“回调里的 return 拿不到”这个说法我觉得可以再强调一下：不是拿不到，而是回调的 return 只用来控制遍历，不会变成 each() 的返回值，所以想收集结果得自己在外面用变量接。这一点和后面 Array.forEach 返回 undefined 的对比连起来看就更清楚了。 最后想问下楼主，第七节提到转数组后用 for...of，如果项目里已经混用了原生 forEach 和 each，排查时有没有什么快速定位的建议？我遇到过一次在 each 回调里写 continue 直接报错的，当时找了半天。

热心网友5

整理得挺全的，尤其把 return false 当 break、return true 当 continue 这点单独拎出来，确实能救不少踩坑的人。我补几个实战里经常碰到的细节，算是给这篇做个注脚。 一个是回调里 this 的坑。each 回调里的 this 是原生 DOM，但前提是写成普通 function；如果顺手写成箭头函数，this 就指向外层了，$(this) 直接拿不到当前元素，报错或者静默处理错对象。这个和原生 forEach 里用 thisArg 的习惯容易混，建议在 each 里统一用第二个参数 domEle，反而更稳。 再一个是 return 的语义比原生 continue 更宽。原生里 continue 是显式的，而 each 里只要 return 的不是 false，包括 return undefined、return null、甚至不写 return，都相当于 continue。所以想「只跳过某次」时，条件分支里写 return true 或者干脆 return 都行，别把它当成必须写 true 才生效。反过来，如果想终止却写成了 return（没写 false），循环会继续跑完，这种 bug 挺隐蔽。 还有一点容易忽略：each 是同步遍历，不能在回调里靠异步操作去影响后续循环。比如回调里发个请求、等结果再决定要不要 return false，这是不行的

热心网友7

这篇总结很到位，尤其把 return false 和 return true 模拟 break 与 continue 这点讲透了，很多新手容易在回调里直接写 break，结果报语法错还找不到原因。另外 domEle 和 this 都是原生 DOM、需要 $( ) 包装后才能调 jQuery 方法，这个坑我确实踩过，代码里 getElementsByTagName 风格的原生属性和 jQuery API 混着用会突然报 text is not a function。 想补充两个实际维护中的小体会：一是 return false 终止的只是当前 each 的遍历，如果外面还套着别的循环，不会影响外层；二是回调里如果涉及异步操作，return false 也挡不住后续逻辑，得用标志变量配合判断，否则“提前终止”的预期会落空。 关于 $(selector).each() 和 $.each() 的对比也很实用，我一般看遍历对象是不是 jQuery 包装集合来决定用哪个。最后那个 item3 的业务示例把索引判断、DOM 包装和提前终止串在一起，比单看 API 说明直观多了，收藏留着以后排查用。