jQuery | each() 方法

jQuery each() 方法用于迭代对象集合，可以遍历数组和对象，在每个元素上执行一些操作或回调函数。该方法的语法如下：

  $(selector).each(function(index,element){
    //执行操作或回调函数
  });

其中，$(selector) 表示要迭代的对象集合， function(index,element) 是一个回调函数，用于每个元素执行的操作。可以根据需要自定义操作或回调函数。

参数说明

• index：当前元素的索引值（从0开始）
• element：当前元素的值（对象集合中的元素）

返回值

each() 方法返回包含 jQuery 对象中的所有元素的该对象。

用法示例

1. 遍历数组并输出每个元素

例如遍历一个数字类型的数组，并输出每个元素的值：

  var arr = [1, 2, 3];

  $.each(arr, function(index, element) {
    console.log("index = " + index + ", element = " + element);
  });

输出结果为：

index = 0, element = 1
index = 1, element = 2
index = 2, element = 3

2. 遍历对象并修改属性

例如遍历一个键值对对象，并将其中的属性值都乘以2：

  var obj = {a: 1, b: 2, c: 3};

  $.each(obj, function(key, value) {
    obj[key] *= 2;
  });

此时，obj 对象变成了 {a: 2, b: 4, c: 6}。

3. 遍历对象集合并隐藏每个元素

例如遍历一个类为item的元素集合，并对每个元素执行隐藏操作：

  $('.item').each(function(index, element) {
    $(element).hide();
  });

此时，页面上所有类为item的元素均被隐藏了。

注意事项

• 由于 each() 方法会遍历所有元素，因此要注意遍历的元素数量不要过多，以免影响网页性能。
• 在回调函数中， this 关键字指向当前元素的值，与 element 参数的值相同。但是在箭头函数中， this 关键字并不指向当前元素，而是指向上下文对象。因此，在使用箭头函数时需要格外注意。