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 包装错误等排查成本。