jquery each（长文讲解）

什么是 jQuery each？初学者也能轻松上手

在前端开发中，我们经常需要对一组元素或数据进行循环处理。比如遍历一个列表中的所有 li 元素，给每个元素添加样式，或者遍历一个 JSON 数据数组，动态生成表格。这时，jquery each 就成了最常用的工具之一。

你可以把 jquery each 想象成一个“勤劳的小工人”。它不只负责一个任务，而是能自动帮你处理多个相似的工作。比如你有一堆相同的盒子，需要逐一检查它们的大小、颜色、内容，jquery each 就能帮你一个接一个地完成这些操作，而不用手动写 N 次代码。

它既适用于 DOM 元素的遍历，也适用于普通数组、对象的遍历。这种灵活性，让它成为 jQuery 中最受欢迎的方法之一。

在接下来的内容里，我会从基础用法讲起，逐步深入，带你看清 jquery each 的真实能力。无论你是刚接触前端，还是已经有了一定经验，都能在这里找到实用的技巧。

jQuery each 的两种基本用法

jquery each 主要有两种使用场景：遍历 DOM 元素集合，以及遍历普通数组或对象。它们的语法几乎一致，但使用方式略有不同。

遍历 DOM 元素集合

当你选择了一组 HTML 元素（比如所有 class 为 item 的 div），就可以用 each 逐一处理它们。

// 选择所有 class 为 item 的元素
$('.item').each(function(index, element) {
    // index: 当前元素的索引（从 0 开始）
    // element: 当前的 DOM 元素（原生 DOM 对象）
    console.log('第 ' + index + ' 个元素的内容是：', $(element).text());
});

注释说明：

• $('.item') 选择所有 class 为 item 的元素，返回一个 jQuery 对象。
• .each() 是 jQuery 提供的方法，用来遍历这个集合。
• 回调函数中，index 是当前元素在集合中的位置（从 0 开始），element 是原生 DOM 节点。
• $(element) 是将原生 DOM 转为 jQuery 对象，以便调用 .text() 等方法。

遍历数组或对象

jquery each 也能处理 JavaScript 的原生数据结构。比如一个用户列表：

const users = [
    { name: '张三', age: 25 },
    { name: '李四', age: 30 },
    { name: '王五', age: 28 }
];

$.each(users, function(index, user) {
    console.log('用户 ' + index + '：' + user.name + '，年龄 ' + user.age);
});

注释说明：

• $.each() 是 jQuery 的静态方法，不需要选择 DOM。
• 第一个参数是数据源（数组或对象）。
• 第二个参数是回调函数，index 表示当前索引（数组）或键名（对象），user 是当前元素。
• 适用于处理 JSON 数据、配置项、列表等。

实际案例：动态生成用户列表

假设你有一个用户数据数组，需要在页面上动态生成一个可点击的用户列表。我们可以用 jquery each 来实现。

<ul id="userList"></ul>

const users = [
    { id: 1, name: 'Alice', role: '管理员' },
    { id: 2, name: 'Bob', role: '编辑' },
    { id: 3, name: 'Charlie', role: '访客' }
];

// 使用 jquery each 动态生成列表项
$.each(users, function(index, user) {
    // 创建一个 li 元素
    const $li = $('<li></li>');

    // 设置文本内容
    $li.text(user.name + ' (' + user.role + ')');

    // 添加点击事件
    $li.on('click', function() {
        alert('点击了用户：' + user.name);
    });

    // 将 li 添加到 ul 中
    $('#userList').append($li);
});

注释说明：

• $.each(users, ...) 遍历用户数组。
• $('<li></li>') 是 jQuery 的 DOM 创建方式。
• text() 设置显示文本。
• on('click', ...) 绑定事件，注意 user 变量是闭包捕获的，能正确保留每个用户的上下文。
• append() 把生成的列表项插入到页面中。

这个例子展示了 jquery each 在实际项目中的典型用途：数据驱动视图。你只需要提供数据，它就能帮你把 UI 一五一十地画出来。

处理对象：遍历键值对

除了数组，jquery each 也能处理对象。这在处理配置项、状态对象时特别有用。

const config = {
    apiUrl: 'https://api.example.com',
    timeout: 5000,
    retries: 3,
    debug: true
};

$.each(config, function(key, value) {
    console.log('配置项：' + key + ' = ' + value);
});

注释说明：

• key 是对象的键名（如 apiUrl）。
• value 是对应的值。
• 适合用于日志输出、配置校验、动态生成设置表单等场景。

⚠️ 注意：jquery each 遍历对象时，顺序不保证。如果需要严格顺序，建议使用 Object.keys() 配合 forEach。

控制遍历流程：return 语句的妙用

jquery each 支持使用 return false 来提前终止循环。这在某些条件下非常实用。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

$.each(numbers, function(index, num) {
    if (num > 5) {
        console.log('找到第一个大于 5 的数：', num);
        return false; // 退出循环
    }
    console.log('当前数：', num);
});

注释说明：

• 当 num > 5 时，输出信息并返回 false。
• return false 会立即停止 each 循环。
• 如果你写 return true，则继续下一次迭代（相当于 continue）。
• 这种方式比 break 更直观，是 jQuery 独有的控制方式。

与原生 forEach 的对比：何时用 each？

很多开发者会问：jquery each 和 JavaScript 的 forEach 有什么区别？其实，它们功能相似，但有几点关键差异：

比如，你要遍历一组 DOM 元素：

// 使用 jquery each（推荐）
$('.item').each(function(index, el) {
    $(el).addClass('highlight');
});

// 使用 forEach（需转换为数组）
Array.from($('.item')).forEach(function(el) {
    $(el).addClass('highlight');
});

jquery each 在处理 jQuery 集合时更自然，代码更简洁。而 forEach 更轻量，适合纯原生项目。

最佳实践与注意事项

1. 避免在 each 中修改原数组：如果在遍历过程中添加或删除元素，可能导致意外行为。比如：

const arr = [1, 2, 3];
$.each(arr, function(i, val) {
    if (val === 2) {
        arr.push(4); // 可能导致无限循环或跳过元素
    }
});

建议：如果需要修改，先复制数组，再遍历副本。

2. 性能考虑：jquery each 比原生 for 循环略慢，但在大多数场景下可忽略。如果处理上万条数据，建议用 for 循环。

3. 不要滥用闭包：在 each 回调中使用外部变量时，要确保其值正确。推荐用 const 声明，避免意外修改。

4. 使用 this 指向：在回调函数中，this 指向当前元素（DOM 节点），可以这样用：

$('.item').each(function() {
    console.log('当前元素：', this); // 原生 DOM 节点
    console.log('当前元素文本：', $(this).text());
});

总结：掌握 jQuery each，提升开发效率

jquery each 是一个强大而实用的方法，它让你能轻松处理多个元素或数据项。无论是动态生成页面内容、处理用户数据，还是遍历配置项，它都能派上用场。

通过本文的学习，你应该已经掌握了它的核心用法：

• 如何遍历 DOM 元素
• 如何遍历数组与对象
• 如何控制循环流程
• 与原生方法的对比与选择

记住，它不是万能的，但在 jQuery 项目中，它绝对是“高频使用工具”之一。学会它，你的代码将更简洁、更易维护。

最后，无论你是新手还是老手，只要遇到“需要对多个东西做相同操作”的场景，都可以想想：能不能用 jquery each？ 很大概率，答案是“能”。