jquery foreach（长文讲解）

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

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

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

前言

在 JavaScript 开发中，遍历数据结构是基础且高频的操作。而 jQuery 提供的 each() 方法，凭借其简洁的语法和强大的功能，成为开发者处理集合数据时的得力工具。无论是遍历 DOM 元素、数组还是对象，each() 都能以直观的方式简化代码逻辑。本文将从基础语法到高级用法，结合实例和常见场景，帮助读者全面掌握 jQuery foreach 的核心技巧。

一、理解 jQuery 的 each() 方法

1.1 each() 的基本语法

each() 是 jQuery 提供的核心遍历方法，其语法结构如下：

$(selector).each(function(index, element) {  
  // 在此编写遍历逻辑  
});

• 参数说明：
  • index：当前元素在集合中的索引（从 0 开始）。
  • element：当前遍历到的元素（可以是 DOM 对象或数组项）。
• 返回值：遍历完成后返回原始 jQuery 对象，支持链式调用。

形象比喻：
可以把 each() 想象成一位“快递分拣员”，它会逐个“扫描”选中的元素或数据项，并按照开发者定义的规则进行处理，例如修改样式、执行计算或触发事件。

1.2 与原生 JavaScript 的对比

在原生 JavaScript 中，遍历数组通常使用 for 循环或 forEach() 方法：

// 原生 JavaScript 遍历数组  
let arr = [10, 20, 30];  
arr.forEach((item, index) => {  
  console.log(`索引 ${index} 的值为 ${item}`);  
});  

而 jQuery 的 each() 语法更接近原生 forEach()，但其优势在于可以直接操作 jQuery 对象中的 DOM 元素，例如：

// jQuery 遍历 DOM 元素  
$("div").each(function(index) {  
  $(this).css("background-color", "yellow");  
});  

关键区别：

• jQuery 的 each() 同时支持遍历 DOM 集合和普通数组/对象。
• 原生 JavaScript 需要分别处理 DOM 和非 DOM 数据。

二、基础应用场景：遍历 DOM 元素

2.1 修改元素样式或属性

假设页面中有多个 <p> 标签，目标是为每个段落添加不同的背景色：

<p>段落1</p>  
<p>段落2</p>  
<p>段落3</p>  

使用 each() 实现：

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

执行效果：

• 索引 0 的段落背景为红色，1 为绿色，2 为蓝色。

2.2 动态生成内容

若需根据数据动态渲染 HTML，例如将数组中的项目显示为列表：

const items = ["苹果", "香蕉", "橙子"];  
let html = "";  

$(items).each(function(index, item) {  
  html += `<li>${item}</li>`;  
});  

$("ul").append(html);  

关键点：

• 通过 $(items) 将普通数组转换为 jQuery 对象，再调用 each()。
• 使用字符串拼接生成 HTML 片段，最后一次性插入页面，避免频繁操作 DOM。

三、进阶技巧：遍历数组与对象

3.1 遍历普通数组

除了 DOM 元素，each() 也适用于非 jQuery 对象的数组：

const numbers = [1, 2, 3, 4, 5];  
let sum = 0;  

$(numbers).each(function(index, num) {  
  sum += num;  
});  

console.log("总和：" + sum); // 输出：15  

3.2 遍历对象属性

对于对象，each() 可以遍历其键值对：

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

$(person).each(function(key, value) {  
  console.log(`${key}: ${value}`);  
});  

输出结果：

name: Alice  
age: 25  
city: New York  

四、高级用法与注意事项

4.1 提前终止循环

若在遍历过程中需提前退出，可以通过返回 false 实现：

$("div").each(function(index) {  
  if (index === 2) {  
    return false; // 当索引为2时终止循环  
  }  
  $(this).css("border", "1px solid black");  
});  

4.2 使用 this 上下文

在 each() 的回调函数中，this 指向当前遍历的原生 DOM 元素。若需使用 jQuery 方法，需包装为 $(this)：

// 错误示例：直接调用 jQuery 方法  
$(this).css("color", "red"); // 正确  
this.css("color", "red");    // 错误，原生元素无此方法  

五、实际案例：表单验证

5.1 需求背景

假设有一个包含多个输入框的表单，要求验证所有字段是否填写：

<form id="myForm">  
  <input type="text" name="username" required>  
  <input type="email" name="email" required>  
  <input type="text" name="phone" required>  
  <button type="submit">提交</button>  
</form>  

5.2 使用 each() 实现验证

$("#myForm").submit(function(e) {  
  e.preventDefault(); // 阻止默认提交  

  let isValid = true;  

  $(this).find("input[required]").each(function() {  
    if ($(this).val().trim() === "") {  
      $(this).css("border", "2px solid red");  
      isValid = false;  
    } else {  
      $(this).css("border", "");  
    }  
  });  

  if (isValid) {  
    alert("提交成功！");  
  }  
});  

功能说明：

• 遍历表单中所有带有 required 属性的输入框。
• 若字段为空，标记红色边框并标记表单无效。
• 若所有字段有效，弹出成功提示。

六、性能优化与常见问题

6.1 避免频繁操作 DOM

在循环中直接修改 DOM 会显著降低性能。建议将结果先存储在变量中，最后一次性更新：

// 低效写法：  
$("div").each(function() {  
  $(this).append("<p>新内容</p>"); // 每次循环都触发重绘  
});  

// 优化写法：  
let html = "";  
$("div").each(function() {  
  html += "<p>新内容</p>";  
});  
$("div").append(html); // 一次性插入内容  

6.2 注意作用域问题

在 each() 回调函数中定义的变量，默认属于外层作用域，需避免意外覆盖：

var result = [];  

$("li").each(function() {  
  var text = $(this).text(); // 局部变量，安全  
  // ...  
});  

// 若误用全局变量：  
// text = $(this).text(); // 会污染全局作用域  

结论

通过本文的讲解，读者应已掌握 jQuery foreach 的核心方法 each()，并能将其应用于 DOM 操作、数据遍历和表单验证等场景。无论是初学者还是中级开发者，理解 each() 的工作原理和最佳实践，都能显著提升代码的简洁性和可维护性。

实践建议：

1. 在真实项目中尝试用 each() 替代复杂的 for 循环。
2. 通过控制台逐步调试遍历逻辑，观察 index 和 element 的变化。
3. 结合性能优化技巧，避免因循环导致的页面卡顿。

掌握 each() 仅仅是开始，后续可进一步探索 jQuery 的其他遍历方法（如 map()、filter()），逐步构建更高效、优雅的 JavaScript 代码。