jQuery 遍历方法 each 实战：循环处理列表数据

在前端开发中，循环处理 DOM 元素或数据列表是非常常见的需求。jQuery 提供的 each() 方法，是遍历 DOM、数组和对象的利器。本文将通过多个实战示例，带你系统掌握 each() 的用法与技巧。

一、each 是什么？

each() 是 jQuery 中用于遍历集合的方法，它可以遍历：

jQuery 选择器选中的 DOM 元素集合
普通数组
对象（键值对）

基本语法

javascript 复制代码

$(selector).each(function(index, element) {
    // index：当前索引
    // element：当前 DOM 元素（原生 JS 对象）
});

或者遍历数组 / 对象：

javascript 复制代码

$.each(arrayOrObject, function(indexOrKey, value) {
    // indexOrKey：索引或键名
    // value：对应的值
});

二、遍历 DOM 列表（最常见用法）

示例 1：遍历 ul 中的 li

xml 复制代码

<ul id="list">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

javascript 复制代码

$('#list li').each(function(index, item) {
    console.log(index + '：' + $(item).text());
});

输出：

复制代码

0：苹果
1：香蕉
2：橙子

注意：$(item) 将原生 DOM 对象转为 jQuery 对象，方便调用 jQuery 方法。

三、遍历数组数据

示例 2：处理普通数组

javascript 复制代码

var fruits = ['苹果', '香蕉', '橙子'];

$.each(fruits, function(i, value) {
    console.log(i + ' => ' + value);
});

输出：

ini 复制代码

0 => 苹果
1 => 香蕉
2 => 橙子

示例 3：生成列表并插入页面

ini 复制代码

var fruits = ['苹果', '香蕉', '橙子'];
var html = '';

$.each(fruits, function(i, item) {
    html += '<li>' + item + '</li>';
});

$('#list').html(html);

四、遍历对象（键值对）

示例 4：遍历 JSON 对象

javascript 复制代码

var user = {
    name: '张三',
    age: 28,
    city: '北京'
};

$.each(user, function(key, value) {
    console.log(key + '：' + value);
});

输出：

复制代码

name：张三
age：28
city：北京

五、实战场景：渲染动态列表

示例 5：渲染商品列表

bash 复制代码

<ul id="productList"></ul>

javascript 复制代码

var products = [
    { name: 'iPhone 15', price: 7999 },
    { name: '华为 Mate 60', price: 6999 },
    { name: '小米 14', price: 3999 }
];

var html = '';

$.each(products, function(i, product) {
    html += '<li>' + product.name + ' - ¥' + product.price + '</li>';
});

$('#productList').html(html);

六、实战场景：批量操作 DOM

示例 6：给所有列表项加样式

javascript 复制代码

$('#list li').each(function() {
    $(this).addClass('item');
});

示例 7：根据条件高亮元素

javascript 复制代码

$('#list li').each(function() {
    if ($(this).text() === '香蕉') {
        $(this).css('color', 'orange');
    }
});

七、退出循环：return false

在 each() 中：

return true → 相当于 continue
return false → 相当于 break

示例 8：找到第一个符合条件的元素后停止遍历

javascript 复制代码

$('#list li').each(function() {
    if ($(this).text() === '香蕉') {
        $(this).css('fontWeight', 'bold');
        return false; // 停止遍历
    }
});

八、each 与 for 循环对比

特性	each	for
语法简洁	✅	❌
DOM 操作友好	✅	❌
性能	略低	✅
控制循环	有限	✅

建议：

遍历 DOM → 优先用 each
大量纯数据计算 → 用原生 for

九、常见坑点

1. this 指向问题

javascript 复制代码

$('li').each(function() {
    console.log(this);        // 原生 DOM
    console.log($(this));     // jQuery 对象
});

2. 遍历空集合不会报错

javascript 复制代码

$('.not-exist').each(function() {
    // 不会执行，也不会报错
});

十、总结

each() 是 jQuery 中非常实用的遍历方法，适合：

遍历 DOM 元素集合
渲染动态列表
批量操作页面元素
处理数组和对象数据

一句话记忆：

DOM 用 each，数据用 for，简单又高效。