jQuery.each使用详解

简介

jQuery.each()函数是一种JavaScript的迭代器，用于遍历JavaScript对象和数组。该函数对于多个DOM元素和对象的集合特别有用，它提供了一种便捷的方法来遍历这些对象。

语法

$.each(collection, callback(indexInArray, valueOfElement));

参数

• collection: 要迭代的数组或对象。
• callback: 为每个匹配元素执行的函数。函数第一个参数指定当前数组元素的索引，第二个参数指定当前元素的值。如果要退出循环可以返回 false，否则返回 true。

示例说明

遍历数组

下面示例代码中，我们使用 each 函数遍历一个数组，并将每个元素的值输出到控制台。这里的数组值为 ['apple', 'orange', 'banana']。

var fruits = ['apple', 'orange', 'banana'];

$.each(fruits, function(index, value) {
  console.log(index + ': ' + value);
});

运行结果将输出：

0: apple
1: orange
2: banana

遍历对象

下面示例代码中，我们使用 each 函数遍历一个 JavaScript 对象，并将每个属性的值输出到控制台。这里的对象值为 {'name': 'Tom', 'age': 18, 'gender': 'male'}。

var obj = { 'name': 'Tom', 'age': 18, 'gender': 'male' };

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

运行结果将输出：

name: Tom
age: 18
gender: male

注意事项

• 在遍历对象时，回调函数的第一个参数是属性名称，第二个参数是属性值。
• 在遍历数组时，回调函数的第一个参数是元素的索引，第二个参数是元素的值。
• 如果在回调函数内返回 false，那么遍历操作就会结束。
• 如果 collection 参数为 null 或 undefined，那么 each 函数将并不做任何操作，也不会抛出错误。