异常教程

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

更新时间:

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

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

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

前言：为什么需要 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()

特性jQuery each()JavaScript forEach()
返回值原始集合undefined
终止循环return falsebreak 不可用
上下文绑定自动绑定当前元素需手动管理 this
支持对象遍历支持仅数组

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() 方法的深入掌握，开发者将能够更优雅地处理复杂场景，如动态表单、数据可视化等项目。记住：工具本身没有魔法，关键在于理解其工作原理并合理运用。

最新发布

查看更多文章