异常教程

jquery each（建议收藏）

更新时间:

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

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

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

前言

在前端开发中，遍历数据集或 DOM 元素是一个高频操作。无论是处理数组、对象，还是操作页面中的 HTML 元素，开发者都需要一种高效且灵活的工具来完成这类任务。jQuery each 方法正是为此而生。它如同一位“导游”，带领开发者逐个访问数据集合中的每一个“景点”（元素或项），并执行指定的操作。本文将从基础到进阶，结合实际案例，深入解析 jQuery each 的核心用法、参数含义、应用场景，以及如何通过它提升开发效率。

jQuery each 的基础语法与核心概念

1. 基本语法与工作原理

jQuery each 方法的语法结构如下：

$(selector).each(function(index, element) {  
  // 在此处编写对每个元素的操作逻辑  
});
  • index：表示当前元素在集合中的索引位置（从 0 开始计数）。
  • element：表示当前正在处理的元素本身。

工作原理：
each 方法会遍历由 $(selector) 选中的所有元素，并为每个元素依次执行回调函数。这类似于 JavaScript 原生的 for 循环，但语法更简洁，且与 jQuery 的链式调用完美兼容。

案例 1：遍历 DOM 元素并添加样式

假设页面中有多个 <div> 元素，目标是为每个 <div> 添加一个随机背景色：

$("div").each(function(index, element) {  
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;  
  $(element).css("background-color", randomColor);  
});

效果：每个 <div> 元素都会被赋予不同的随机颜色。

2. 参数详解：索引与元素的关系

在回调函数的参数中，index 和 element 的搭配使用是关键：

  • 索引的用途：可用于判断元素的位置（例如，奇偶行交替颜色）、动态生成唯一 ID 等。
  • 元素的引用：通过 $(element) 可以直接调用 jQuery 方法，简化代码。

案例 2：为奇数索引的元素添加类名

$("li").each(function(index) {  
  if (index % 2 === 0) {  
    $(this).addClass("even-item"); // 使用 `this` 代替 `element` 更简洁  
  }  
});

说明：

  • this 在回调函数中默认指向当前元素，因此无需显式传递 element 参数。
  • 通过 index % 2 可判断元素的索引是否为偶数（从 0 开始计数）。

jQuery each 的进阶用法

1. 遍历非 DOM 数据结构：数组与对象

each 方法不仅适用于 DOM 元素，还可用于遍历 JavaScript 数组或对象：

// 遍历数组  
const numbers = [10, 20, 30];  
$.each(numbers, function(index, value) {  
  console.log(`索引 ${index} 对应的值是 ${value}`);  
});  

// 遍历对象  
const user = { name: "Alice", age: 25 };  
$.each(user, function(key, value) {  
  console.log(`属性 ${key} 的值是 ${value}`);  
});

区别与注意点：

  • 当遍历数组时，index 是数值型索引；遍历对象时，index 变为属性名的字符串。
  • 需使用 $.each() 而非 $(selector).each()，因为对象或数组本身不是 jQuery 对象。

2. 提前终止遍历：返回 false 的技巧

在回调函数中，若返回 false，则会立即终止 each 的后续遍历，类似于 break 语句。

案例 3：查找第一个符合条件的元素并停止遍历

$("button").each(function(index) {  
  if ($(this).text() === "Cancel") {  
    $(this).hide();  
    return false; // 找到后立即停止遍历  
  }  
});

效果：仅隐藏第一个文本为“Cancel”的按钮，后续按钮不会被处理。

与原生 JavaScript 的对比：为何选择 each？

1. 语法简洁性

原生 JavaScript 需要手动编写 for 循环或 forEach，而 each 方法通过 jQuery 的封装简化了代码：

// 原生遍历数组  
const items = document.querySelectorAll("div");  
Array.from(items).forEach((element, index) => {  
  // ...  
});  

// jQuery 版本  
$("div").each(function(index) {  
  // ...  
});

优势：

  • 减少冗余代码（如 Array.from 转换）。
  • 自动兼容旧版浏览器（jQuery 会处理兼容性问题）。

2. 链式调用与上下文

在 jQuery 中，each 可以无缝嵌入到链式调用中，并且 this 的指向始终是当前元素：

$("input").each(function() {  
  $(this).val("").prop("disabled", true); // 直接调用 jQuery 方法  
}).css("border", "1px solid red"); // 链式调用继续操作

而原生代码需要额外处理上下文（如使用 bind 或临时变量）。

性能优化与常见误区

1. 避免在 each 内部执行耗时操作

虽然 each 方法方便，但若在回调函数中执行大量计算或 DOM 操作，可能导致页面卡顿。例如：

// 不良实践：在 each 内部频繁操作 DOM  
$("div").each(function() {  
  // 执行复杂的计算或 AJAX 请求  
});

解决方案：

  • 将耗时操作移到外部，或使用 setTimeout 分散执行。
  • 使用原生 for 循环替代（在极端性能敏感场景）。

2. 注意元素集合的动态变化

在遍历时，若修改了元素集合本身（例如删除或添加元素），可能导致遍历顺序混乱或死循环。例如：

// 风险示例：遍历时删除当前元素  
$("li").each(function(index) {  
  $(this).remove(); // 可能导致索引错位  
});

解决方案：

  • 先收集需要操作的元素，再统一执行操作。
  • 使用 filter() 或 map() 方法替代直接修改集合。

实战案例：构建动态表格排序功能

需求场景

实现一个简单的表格，用户可点击表头对任意列进行升序/降序排序。

实现步骤

  1. HTML 结构：
<table id="myTable">  
  <thead>  
    <tr>  
      <th data-sort="name">姓名</th>  
      <th data-sort="age">年龄</th>  
      <th data-sort="score">分数</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr><td>张三</td><td>25</td><td>88</td></tr>  
    <!-- 其他行省略 -->  
  </tbody>  
</table>
  1. JavaScript 逻辑：
$("#myTable th").click(function() {  
  const columnKey = $(this).data("sort"); // 获取排序字段  
  const $rows = $("#myTable tbody tr");  

  // 收集数据并排序  
  const sortedRows = $rows.get().sort((a, b) => {  
    const aValue = $(a).find(`td:eq(${columnKey})`).text();  
    const bValue = $(b).find(`td:eq(${columnKey})`).text();  
    return aValue.localeCompare(bValue); // 字符串排序  
  });  

  // 重新渲染表格  
  $.each(sortedRows, function(index, row) {  
    $("#myTable tbody").append(row); // 将排序后的行追加回去  
  });  
});

说明：

  • 通过 each 方法遍历排序后的行集合，并逐个追加到表格中，确保顺序正确。
  • 使用 data-sort 属性存储列对应的字段名，增强代码可维护性。

结论

jQuery each 方法是前端开发者工具箱中的“瑞士军刀”，它以简洁的语法和强大的功能，简化了遍历操作的复杂度。无论是处理 DOM 元素、数组，还是实现动态交互功能，开发者都能通过合理运用 each 提升开发效率。

通过本文的讲解，读者应能掌握以下核心要点：

  • 基础用法：参数含义、DOM 遍历与数据结构遍历。
  • 进阶技巧：提前终止遍历、结合其他 jQuery 方法。
  • 性能优化：避免常见陷阱，平衡便利性与代码质量。

未来，随着 JavaScript 生态的演进（如 ES6 的 for...of 和 Array.prototype.forEach），开发者需根据项目需求选择最合适的技术方案。但 jQuery each 作为经典工具，仍将在兼容性要求较高的场景中发挥重要作用。

（全文约 1,800 字）

最新发布

查看更多文章