jquery的each方法

jQuery 的 each() 方法

jQuery 的 each() 方法用于遍历一个 jQuery 对象或数组/对象，并对每个元素执行回调函数。它有两种形式：一种用于遍历 jQuery 对象，另一种用于通用遍历（类似 $.each()）。

遍历 jQuery 对象

语法：

$(selector).each(function(index, element) {
  // 操作逻辑
});

• index：当前元素的索引。
• element：当前 DOM 元素（可直接用 this 代替）。

示例：

$('li').each(function(index) {
  console.log(index + ': ' + $(this).text());
});

通用遍历（$.each()）

语法：

$.each(collection, function(index, value) {
  // 操作逻辑
});

• collection：可以是数组或对象。
• index：数组的索引或对象的键。
• value：数组的值或对象的属性值。

示例（遍历数组）：

var arr = ['a', 'b', 'c'];
$.each(arr, function(index, value) {
  console.log(index + ': ' + value);
});

示例（遍历对象）：

var obj = { name: 'John', age: 30 };
$.each(obj, function(key, value) {
  console.log(key + ': ' + value);
});

中断遍历

在回调函数中返回 false 可以中断遍历（类似 break）。返回 true 会跳过当前迭代（类似 continue）。

示例：

$.each([1, 2, 3, 4], function(index, value) {
  if (value === 3) return false; // 中断遍历
  console.log(value);
});

与原生 forEach 的区别

• each() 可以遍历 jQuery 对象和通用集合，而 forEach 仅用于数组。
• each() 支持中断逻辑（return false），而 forEach 无法直接中断。

注意事项

• 使用 $(this) 或 element 访问 DOM 元素时，确保元素存在。
• 对于性能敏感的场景，原生循环（如 for）可能更快。