jQuery each() 方法（长文解析）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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() 方法？

在 Web 开发中，遍历数据是一个高频需求。无论是操作一组 DOM 元素、处理数组元素，还是遍历对象属性，开发者都需要一种高效且灵活的解决方案。jQuery each() 方法正是为解决这一需求而设计的核心工具。它像一位经验丰富的“数据导游”，能帮助开发者系统化地访问并操作任意集合中的每一个成员。对于编程初学者而言，掌握 this() 方法可以显著提升代码的简洁性和可维护性；而对中级开发者来说，深入理解其底层逻辑，能更好地优化复杂场景的性能。

一、基础概念：each() 方法的核心语法

1.1 方法基本结构

jQuery each() 方法的基本调用形式有两种：

// 用于 jQuery 对象（如 DOM 元素）
$(selector).each(function(index, element) { ... });

// 用于普通数组或对象
$.each(collection, function(index, value) { ... });

其中：

• index：当前元素在集合中的索引值（从 0 开始）
• element 或 value：当前遍历到的元素本身（根据上下文不同）
• this 关键字在 jQuery 中始终指向当前元素

形象比喻：可以把 each() 方法想象成快递分拣中心的传送带，index 是快递单号，element 是包裹本身，而 this 就是包裹的物理位置。

1.2 与原生 JavaScript 的对比

与原生的 for 循环相比，each() 方法的最大优势在于：

• 统一处理 DOM 元素和普通数据集合
• 内置上下文绑定（this 自动指向当前元素）
• 提供立即终止循环的机制（返回 false）

// 原生 for 循环
const elements = document.querySelectorAll('div');
for (let i=0; i<elements.length; i++) {
  const element = elements[i];
  // 需要手动管理索引和元素
}

// jQuery each() 方法
$('div').each(function(index) {
  // 自动绑定 this，直接操作元素
});

二、核心应用场景详解

2.1 遍历 DOM 元素集合

经典案例：批量修改页面中所有段落的文本颜色

$("p").each(function(index) {
  // 使用 $(this) 将 DOM 元素包装为 jQuery 对象
  $(this).css("color", "#FF0000");
  console.log("第 " + (index+1) + " 个段落：" + this.textContent);
});

技巧点拨：在 this 上直接调用 jQuery 方法时，需要先用 $() 包裹，例如 $(this).hide()。

2.2 处理 JavaScript 数组

应用场景：遍历用户输入的邮箱列表进行格式校验

const emails = ["user1@example.com", "user2@domain", "admin@site.org"];
$.each(emails, function(index, email) {
  if (!email.includes("@")) {
    console.error("无效邮箱：" + email);
  }
});

性能提示：当处理超大数据集时（如 10000+ 项），建议优先使用原生 for...of 循环，但多数 Web 场景中 each() 的性能完全足够。

2.3 遍历对象属性

高级用法：遍历配置对象并动态生成表单字段

const formConfig = {
  name: "用户名",
  email: "邮箱地址",
  age: "年龄"
};

$.each(formConfig, function(key, value) {
  $("<div>")
    .append($("<label>").text(value))
    .append($("<input>").attr("name", key))
    .appendTo("#form-container");
});

注意事项：对象属性的遍历顺序在 ES6 之后的规范中已保证有序，但建议仍避免依赖顺序逻辑。

三、进阶技巧与常见问题

3.1 立即终止循环

通过在回调函数中返回 false，可以实现类似 break 的效果：

// 遍历直到找到第一个无效邮箱
const emails = ["", "test@domain", "valid@example.com"];
let firstInvalid = null;
$.each(emails, function(index, email) {
  if (email.trim() === "") {
    firstInvalid = index;
    return false; // 终止循环
  }
});
console.log("第一个空邮箱在索引：" + firstInvalid);

3.2 上下文绑定问题

当在对象方法中使用 each() 时，需要特别注意 this 的指向：

const myObject = {
  elements: $("div"),
  highlight: function() {
    this.elements.each(function() { // 此时 this 指向 div 元素
      $(this).css("background", "yellow");
    });
  }
};
// 正确调用方式
myObject.highlight();

解决方法：可以使用箭头函数或 $.proxy 保存外部上下文：

highlight: function() {
  this.elements.each( (index, el) => {
    $(el).css("background", "yellow");
  });
}

3.3 与 CSS 选择器的结合

each() 方法常与复杂选择器配合使用，例如筛选出可见元素：

$(".list-item:visible").each(function() {
  // 只处理可见的列表项
});

四、典型应用场景实战

4.1 实时统计列表项数量

在动态列表中实时显示项目数量：

$("#item-list li").each(function(index) {
  $(this).prepend("(" + (index+1) + ") ");
});
$("#count-display").text("共 " + $("#item-list li").length + " 项");

4.2 表单数据收集

将表单字段值收集为对象：

const formData = {};
$("#myForm input").each(function() {
  formData[this.name] = $(this).val();
});
console.log(formData);

4.3 图片懒加载优化

实现基础版的图片懒加载功能：

$("img.lazy").each(function() {
  const img = $(this);
  $(window).on("scroll", function() {
    if (isInViewport(img)) {
      img.attr("src", img.data("src"))
        .off("scroll"); // 卸载事件避免重复加载
    }
  });
});

五、常见陷阱与解决方案

5.1 索引值误解

在对象遍历时，index 实际是属性名而非数字索引：

const obj = {a:1, b:2};
$.each(obj, function(index, value) {
  console.log(index); // 输出 "a", "b" 而非 0,1
});

5.2 事件绑定重复问题

在 each() 中绑定事件时需谨慎：

// 错误写法：每个元素都会绑定多个事件
$(".button").each(function() {
  $(this).click(function() { ... });
});

// 正确写法：统一绑定
$(".button").click(function() { ... });

5.3 性能瓶颈排查

当发现 each() 循环性能问题时，可：

1. 检查回调函数内部是否存在高耗时操作
2. 尝试使用原生方法优化（如 Array.from()）
3. 对超大数据集改用 Web Worker

六、与类似方法的对比分析

6.1 each() vs. forEach()

6.2 each() vs. for...in

对于对象属性遍历：

• $.each() 自动过滤原型链属性
• for...in 需要手动使用 hasOwnProperty()

// 安全的 for...in 写法
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    // 处理逻辑
  }
}

结论：掌握 each() 方法的进阶之路

jQuery each() 方法不仅是遍历操作的利器，更是理解 JavaScript 集合处理逻辑的重要切入点。通过本文的系统解析，开发者可以：

• 快速上手基础用法
• 理解上下文绑定机制
• 避免常见性能陷阱
• 结合实际案例优化代码

在实际开发中，建议将 each() 与选择器、事件方法结合，构建高效的 DOM 操作链。随着对 this() 方法的深入掌握，开发者将能够更优雅地处理复杂场景，如动态表单、数据可视化等项目。记住：工具本身没有魔法，关键在于理解其工作原理并合理运用。