当前位置：首页 > jquery

jquery中的each方法

2026-03-17 09:29:53jquery

jQuery 中的 each 方法

jQuery 的 each() 方法用于遍历一个 jQuery 对象或数组/对象，并对每个元素执行回调函数。以下是具体用法和示例：

遍历 jQuery 对象

用于遍历 jQuery 选择的 DOM 元素集合：

$('selector').each(function(index, element) {
    // index: 当前元素的索引
    // element: 当前 DOM 元素（可通过 $(element) 转为 jQuery 对象）
    console.log(index, element);
});

遍历数组或对象

用于遍历普通数组或对象：

$.each(arrayOrObject, function(indexOrKey, value) {
    // indexOrKey: 数组索引或对象键名
    // value: 当前项的值
    console.log(indexOrKey, value);
});

示例代码

遍历 DOM 元素：

$('li').each(function(i, el) {
    $(el).text(i + ': ' + $(el).text());
});

遍历数组：

var arr = ['a', 'b', 'c'];
$.each(arr, function(i, val) {
    console.log(i, val); // 输出：0 'a', 1 'b', 2 'c'
});

遍历对象：

var obj = { name: 'John', age: 30 };
$.each(obj, function(key, val) {
    console.log(key, val); // 输出：'name' 'John', 'age' 30
});

中断遍历

在回调函数中返回 false 可终止遍历：

jquery中的each方法

$.each([1, 2, 3], function(i, val) {
    if (val === 2) return false; // 遍历终止
    console.log(val); // 只输出：1
});

注意事项

jQuery 对象的 each() 和 $.each() 参数顺序不同：
- jQuery 对象：function(index, element)
- $.each()：function(indexOrKey, value)
原生 DOM 元素需用 $(element) 转为 jQuery 对象才能调用 jQuery 方法。