jquery foreach（千字长文）

什么是 jQuery foreach？初学者也能看懂的遍历机制

在前端开发中，我们经常需要处理一组数据，比如从服务器获取的用户列表、表单中的多选框值，或者页面上多个相同类名的元素。这时候，循环遍历（forEach）就成了必备技能。jQuery 提供了 $.each() 方法，它就是我们常说的 “jquery foreach” —— 一种优雅、简洁的数据遍历方式。

如果你刚开始接触 jQuery，可能会觉得 each 和原生 JavaScript 的 forEach 差不多。但其实，jQuery 的 $.each() 更灵活，它不仅能遍历数组，还能处理对象，甚至 DOM 元素集合。这就像一把多功能瑞士军刀，用对了地方，效率能翻倍。

在接下来的内容里，我会带你一步步掌握这个功能，从基础用法到实战场景，让你真正理解 “jquery foreach” 的强大之处。

如何使用 jQuery foreach 遍历数组

最常见的情况是处理一个数据数组。假设我们有一个用户列表，每个用户都有姓名和年龄：

// 定义一个用户数组，每个元素是一个对象
const users = [
  { name: "张三", age: 25 },
  { name: "李四", age: 30 },
  { name: "王五", age: 22 }
];

现在我们要把每个人的姓名和年龄都打印出来。原生 JavaScript 可以用 forEach()，但 jQuery 提供了 $.each()，语法类似，但功能更丰富。

// 使用 jQuery 的 $.each() 遍历数组
$.each(users, function(index, user) {
  // index 是当前元素的索引（从 0 开始）
  // user 是当前遍历的对象（如 { name: "张三", age: 25 }）
  console.log("第 " + index + " 个用户：姓名是 " + user.name + "，年龄是 " + user.age);
});

代码解释：

$.each() 是 jQuery 的全局方法，不需要选择器。
第一个参数是你要遍历的数据（数组或对象）。
第二个参数是一个回调函数，接收两个参数：
- index：当前元素的索引位置。
- user：当前元素本身（对象或值）。
函数体里可以自由操作当前数据。

💡 小贴士：$.each() 的回调函数中，this 指向当前遍历的元素，和 user 是等价的。

遍历对象（键值对）的实用技巧

除了数组，$.each() 还能处理对象。想象你有一个配置对象，里面存储了页面的标题、主题颜色等信息：

const config = {
  title: "用户管理系统",
  theme: "dark",
  version: "1.0.3",
  enableLog: true
};

我们要遍历这个对象，把每个键和值都输出：

$.each(config, function(key, value) {
  // key 是属性名，比如 "title"
  // value 是对应值，比如 "用户管理系统"
  console.log("配置项： " + key + " = " + value);
});

输出结果：

配置项： title = 用户管理系统
配置项： theme = dark
配置项： version = 1.0.3
配置项： enableLog = true

关键点：

在对象遍历时，key 是属性名，value 是属性值。
顺序不保证，因为对象的属性顺序在 ES6 之前是不确定的。

这个功能在处理 JSON 数据、配置项、表单字段时特别有用。比如你要把表单的所有字段名和值收集起来，$.each() 就是首选。

操作 DOM 元素集合：jquery foreach 的真正优势

这才是 jquery foreach 最闪耀的地方。当你要对一组 DOM 元素进行统一操作时，$.each() 就派上用场了。

假设 HTML 页面中有多个 <li> 元素，你想给它们加上类名或修改样式：

<ul id="user-list">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
  <li>赵六</li>
</ul>

我们用 jQuery 选择所有 li 元素，然后遍历它们：

// 选择所有 li 元素，返回一个 jQuery 对象
const $lis = $("#user-list li");

// 使用 $.each() 遍历每个 li 元素
$.each($lis, function(index, element) {
  // element 是原生 DOM 元素，不是 jQuery 对象
  // 所以需要包装成 jQuery 对象才能使用 .addClass() 等方法
  $(element).addClass("list-item").css("color", "blue");
});

注意：

在 $.each() 的回调中，element 是原生 DOM 节点，不能直接调用 .addClass()。
必须用 $(element) 包装成 jQuery 对象，才能使用 jQuery 方法。

✅ 更推荐写法：直接用 jQuery 的 .each() 方法，它会自动处理 this 指向当前 DOM 元素：

$("#user-list li").each(function(index, element) {
  // this 就是当前的 DOM 元素，无需再包装
  $(this).addClass("highlight").text("用户：" + (index + 1));
});

这个写法更简洁，也更常见。所以记住：对 jQuery 对象使用 .each()，对普通数据使用 $.each()。

实战案例：动态生成用户卡片列表

我们来做一个完整的例子：从一个用户数组中，动态创建 HTML 卡片，并插入页面。

// 用户数据
const userList = [
  { name: "张三", age: 25, city: "北京" },
  { name: "李四", age: 30, city: "上海" },
  { name: "王五", age: 22, city: "广州" }
];

// 定义一个 HTML 模板函数（可选，但更清晰）
function createUserCard(user) {
  return `
    <div class="user-card">
      <h3>${user.name}</h3>
      <p>年龄：${user.age} 岁</p>
      <p>城市：${user.city}</p>
    </div>
  `;
}

// 使用 $.each() 遍历用户列表，生成卡片
$.each(userList, function(index, user) {
  // 将每个用户生成的 HTML 插入到指定容器中
  $("#user-container").append(createUserCard(user));
});

对应的 HTML：

<div id="user-container"></div>

效果： 页面会动态显示三张用户卡片，每张卡片包含姓名、年龄和城市信息。

这个例子展示了 jquery foreach 的核心价值：将数据与 UI 绑定，实现动态渲染。在实际项目中，这种模式广泛用于列表渲染、分页、搜索结果展示等场景。

常见错误与最佳实践

虽然 $.each() 简单好用，但初学者容易踩坑。下面是一些常见问题和建议：

1. 混淆 `$.each()` 和 `.each()`

$.each()：用于遍历数组、对象等数据结构。
.each()：用于遍历 jQuery 对象（DOM 集合）。

// ✅ 正确：遍历数组
$.each([1, 2, 3], function(i, val) {
  console.log(val);
});

// ✅ 正确：遍历 DOM 元素
$("li").each(function() {
  $(this).css("font-weight", "bold");
});

2. 忘记包装 DOM 元素

在 $.each() 中处理 DOM 元素时，element 是原生节点，不能直接调用 jQuery 方法：

// ❌ 错误写法
$.each($("li"), function(i, el) {
  el.addClass("highlight"); // 报错！el 不是 jQuery 对象
});

// ✅ 正确写法
$.each($("li"), function(i, el) {
  $(el).addClass("highlight"); // 用 $() 包装
});

3. 避免在循环中频繁操作 DOM

每次 append() 或 html() 都会触发重排重绘，影响性能。建议先拼接字符串，最后一次性插入：

let html = ""; // 先拼接 HTML
$.each(userList, function(i, user) {
  html += `<div>${user.name}</div>`;
});
$("#container").html(html); // 一次性插入

总结：让 jquery foreach 成为你的好帮手

通过本文，你应该已经掌握了 jquery foreach 的核心用法：无论是遍历数组、对象，还是操作 DOM 元素集合，它都能轻松应对。它不是简单的“循环”，而是一种数据与视图联动的高效工具。

在实际开发中，你可能会发现很多场景都离不开它：表单验证、动态列表生成、配置项读取、数据聚合处理……只要涉及“批量处理”，jquery foreach 就值得你掌握。

记住：不要死记语法，而是理解“为什么要遍历”、“遍历什么”、“如何操作”。当你能自然地写出 $.each() 的代码时，说明你已经迈过了前端开发的第一道门槛。

最后提醒一句：虽然 jQuery 依然强大，但在现代项目中，原生 JavaScript 的 forEach、map、for...of 也足够强大。但如果你在维护老项目，或者需要快速处理 DOM，jquery foreach 依然是不可替代的利器。