JavaScript对dom元素遍历的代码示例

一、前言

在 jQuery 开发中，我们经常会拿到一组 DOM 对象集合，需要批量操作里面每一个元素。原生 JS 可以用 for、forEach 循环，而 jQuery 提供了专属的 $(selector).each() 遍历方法，专门用来处理 jQuery 对象集合，支持链式调用，使用非常高频。本文结合思维导图梳理 each() 的用法、特性、坑点以及代码示例。

二、$(selector).each()核心特性

$(selector).each(function(index,domEle){
    // 循环内部逻辑
})

1. 作用：遍历 jQuery 对象集合中的 DOM 元素 $(selector) 获取到的是 jQuery 包装对象，内部封装了一组 DOM 元素。.each() 会逐个取出集合里的每一个原生 DOM，执行回调函数。

注意：回调函数里第二个参数 domEle 是原生 DOM 对象，不是 jQuery 对象，如果要使用 jQuery 方法，需要转成 $(domEle)。

1. 支持链式调用 each() 执行完成之后依旧返回原来的 jQuery 对象，所以可以继续链式写其他 jQuery 方法。

// each遍历完成后继续调用css链式操作
$("li").each(function(i,el){
    console.log(i,el.innerHTML);
}).css("color","red");

1. 返回值：jQuery 对象 不管循环内部做了什么操作，$(selector).each() 的返回结果始终是调用它的 jq 对象，不会返回 回调函数的 return 值。这点和数组 Array.forEach() 不一样，数组 forEach 返回 undefined。
2. 回调函数内处理每一个元素 回调函数自带两个形参：

• index：当前遍历元素的索引，从 0 开始；
• domEle：当前遍历到的原生 DOM 元素，等价于回调内部的 this。

$("li").each(function(index, domEle) {
    console.log(index);         // 索引
    console.log(domEle.innerText); // 原生DOM读取内容
    console.log($(this).text());   // this转jQuery对象调用jq方法
})

三、重要注意点：循环的终止与跳过

原生 for 循环可以使用 break 终止循环、continue 跳过本次循环。 但是在 each 的回调函数中，不能直接写 break /continue，要用 return 来模拟实现。

表格

坑点：不要写 break、continue 写在 each 回调里面，会直接报语法错误！

示例 1：return false 终止整个循环

// 遍历li，索引等于2的时候直接终止全部循环
$("li").each(function(index){
    console.log(index);
    if(index === 2){
        return false; // 相当于break，循环直接结束
    }
})

示例 2：return true 跳过本次循环

// 索引为1的时候跳过本次，不执行打印，直接下一轮
$("li").each(function(index){
    if(index === 1){
        return true; // 等价continue，跳过本次
    }
    console.log(index);
})

四、补充：$.each () 与 $(selector).each () 的区别（容易混淆）

很多同学会混淆两个 each：

1. $(selector).each()：jQuery 对象方法，专门遍历 DOM 元素集合；
2. $.each(obj,callback)：jQuery 静态工具方法，可以遍历数组、普通对象，不限于 DOM。

// 工具方法遍历普通数组
$.each([10,20,30],function(i,val){
    console.log(i,val)
})

开发 DOM 批量操作优先使用 $(selector).each()；遍历普通数组 / 对象用 $.each()。

五、和原生 Array.forEach 的对比

1. forEach：只能遍历数组，不能直接遍历 jq 对象集合；返回 undefined；回调内部 return 不能终止循环。
2. $(selector).each()：专门处理 jq 包装的 DOM 集合；返回 jq 对象支持链式；通过 return false/true 实现 break、continue 逻辑。

六、常见业务场景示例

需求：批量给列表项设置样式，遇到指定条件就停止遍历

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

$("ul li").each(function(idx,ele){
    let text = $(ele).text();
    if(text === "item3"){
        return false; // 找到item3直接终止循环，后面item4不会执行
    }
    $(ele).css("background-color","#eee");
})

七、总结

1. $(selector).each() 用于遍历 jQuery 对象内的 DOM 元素集合，回调接收索引、原生 DOM 两个参数；
2. 方法返回 jQuery 对象，支持链式调用；
3. each 回调中禁止直接写 break /continue；return false 终止全部循环；return true 跳过本次；
4. 区分实例方法 .each() 和静态工具方法 $.each()，前者面向 DOM，后者面向数组、普通对象。

小提示：现在 ES6 + 时代很多场景可以把 jq 对象转数组用 for...of，但是老项目维护中，each() 依然是高频 API。

以上就是JavaScript对dom元素遍历的代码示例的详细内容，更多关于JavaScript dom元素遍历的资料请关注脚本之家其它相关文章！

最新评论