首页
/ 正文

jQuery 杂项 each() 方法（一文讲透）

更新时间: 2025-04-06 16:22:55

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

前言：jQuery each() 方法的重要性

在前端开发中，遍历数据或操作 DOM 元素是常见的需求。jQuery 的 each() 方法正是为此设计的“瑞士军刀级”工具，它简化了循环逻辑，让开发者能够高效地处理动态内容。无论是遍历数组、集合对象，还是操作页面中的元素，each() 方法都能提供一致且简洁的解决方案。本文将从基础到进阶，结合实例和类比，帮助读者全面掌握这一核心方法。

基础用法：each() 方法的两种形态

1. 遍历数组或对象

each() 方法的最基础用法是遍历数组或对象。它接受一个回调函数作为参数，逐个处理集合中的每个元素。

示例代码：遍历数组

const numbers = [10, 20, 30, 40];  
$.each(numbers, function(index, value) {  
  console.log("索引:", index, "值:", value);  
});

输出结果：

索引: 0 值: 10  
索引: 1 值: 20  
索引: 2 值: 30  
索引: 3 值: 40

形象比喻：

可以把 each() 想象成一位快递分拣员，他收到一箱包裹（数组或对象），逐个打开每个包裹（元素），并根据预设规则处理（回调函数中的逻辑）。

2. 遍历 jQuery 对象集合

当需要操作 DOM 元素时，each() 方法与 jQuery 的选择器结合使用，能够轻松实现批量操作。

示例代码：改变所有段落的背景色

$("p").each(function(index) {  
  $(this).css("background-color", ["red", "green", "blue"][index % 3]);  
});

效果：页面中的段落会以红、绿、蓝三色交替显示背景。

关键点解析：

this 在回调函数中指向当前元素的原生 DOM 对象。
使用 $(this) 将其转换为 jQuery 对象，以便调用其他 jQuery 方法。

参数详解：理解 index 和 value 的作用

1. 回调函数的参数

each() 的回调函数接受两个参数：

index：当前元素在集合中的索引（从 0 开始）。
value：当前元素的值（对于数组是元素本身，对于对象是属性值）。

示例：遍历对象

const user = {  
  name: "Alice",  
  age: 25,  
  city: "New York"  
};  

$.each(user, function(key, value) {  
  console.log("属性名:", key, "属性值:", value);  
});

输出：

属性名: name 属性值: Alice  
属性名: age 属性值: 25  
属性名: city 属性值: New York

2. 提前终止循环：return false 的妙用

如果在回调函数中返回 false，each() 将立即停止遍历，类似于 break 语句。

示例：查找第一个符合条件的元素

let found = null;  
$("div").each(function() {  
  if ($(this).text().includes("目标内容")) {  
    found = $(this);  
    return false; // 找到后终止循环  
  }  
});

上下文对象：this 的行为解析

1. 在 jQuery 对象遍历时

当使用 $("selector").each() 时，this 指向当前 DOM 元素，而 $(this) 则是对应的 jQuery 对象。

对比：原生 JavaScript 的 forEach()

原生 Array.prototype.forEach() 中的 this 是调用上下文，而 jQuery 的 each() 明确将 this 绑定到当前元素，这减少了上下文混乱的风险。

2. 在 $.each() 遍历时

当使用全局 $.each() 遍历非 jQuery 对象（如普通数组或对象）时，this 默认指向当前元素的值。但可以通过第二个参数指定上下文对象。

示例：自定义 this 上下文

const context = { name: "ContextObj" };  
$.each([1, 2, 3], function() {  
  console.log(this.name); // 输出 "ContextObj"  
}, context);

进阶应用：each() 方法的扩展场景

1. 嵌套循环：处理多维数据

对于二维数组或对象嵌套结构，可以通过嵌套 each() 实现多层遍历。

示例：遍历表格数据

const tableData = [  
  { id: 1, name: "A" },  
  { id: 2, name: "B" }  
];  

$.each(tableData, function() {  
  $.each(this, function(key, value) {  
    console.log(key + ":", value);  
  });  
});

2. 性能优化：减少 DOM 操作

频繁操作 DOM 会拖慢页面性能。建议将多次操作合并为一次，或利用 each() 的灵活性缓存数据。

优化示例：批量修改样式

let styles = [];  
$("li").each(function() {  
  styles.push({  
    color: $(this).css("color"),  
    width: $(this).width()  
  });  
});  
// 后续统一处理 styles 数组

常见问题与解决方案

问题 1：this 指向不明确

现象：在回调函数中调用其他方法时，this 可能丢失原始上下文。
解决方法：使用 let self = this; 保存当前元素的引用。

$("button").each(function() {  
  let self = this;  
  $(self).click(function() {  
    console.log("按钮", self.id, "被点击"); // 正确获取元素  
  });  
});

问题 2：误用 return true/false

常见错误：开发者可能错误地认为 return true 可以跳过当前元素。
正确理解：each() 中的返回值仅 false 表示终止循环，其他返回值（包括 true）均不影响循环继续。

最佳实践：合理使用 each() 方法

1. 优先使用 jQuery 链式语法

当需要对元素集合执行多个操作时，尽量通过链式调用替代 each()，以提升代码简洁性。

对比示例：

// 低效写法（使用 each()）  
$("div").each(function() {  
  $(this).addClass("highlight").css("color", "red");  
});  

// 高效写法（链式调用）  
$("div").addClass("highlight").css("color", "red");

2. 结合数据缓存提高性能

对于需要重复遍历的集合，建议先缓存选择结果，避免重复查询 DOM。

const $elements = $(".item"); // 缓存选择结果  
$elements.each(function() {  
  // 执行操作  
});

结论：掌握 each() 方法的全局价值

jQuery 的 each() 方法不仅是遍历工具，更是实现复杂逻辑的“脚手架”。通过本文的系统讲解，读者应能理解其核心机制、应用场景及优化技巧。无论是处理简单数组还是优化 DOM 操作，each() 方法都能提供高效且灵活的解决方案。在实际开发中，建议结合其他 jQuery 方法（如 map()、filter()）进一步扩展功能，让代码更简洁、更易维护。

通过本文的深入剖析，希望读者不仅能掌握 jQuery 杂项 each() 方法 的基础与进阶用法，更能培养举一反三的能力，将循环逻辑设计得更加优雅和高效。