jQuery each()方法

jQuery中的each()方法被用于遍历数组和对象的集合。它可以很方便地遍历和操作DOM元素集合。

语法

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

注意：selector可以为任何jQuery选择器，function()是回调函数，index是当前元素的索引，element是当前元素本身。可以将element作为jQuery对象使用，对其进行操作。

示例1 - 遍历数组

const arr = [1, 2, 3, 4, 5];
$.each(arr, function(index, element){
  console.log(index + ": " + element);
});

结果：

0: 1
1: 2
2: 3
3: 4
4: 5

示例2 - 遍历对象

const obj = {name: "Jack", age: 20, gender: "Male"};
$.each(obj, function(key, value){
  console.log(key + ": " + value);
});

结果：

name: Jack
age: 20
gender: Male

示例3 - 操作DOM元素集合

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

$("li").each(function(index, element){
  console.log(index + ": " + $(element).text());
});

结果：

0: item 1
1: item 2
2: item 3
3: item 4
4: item 5

示例4 - 中断循环

each()方法也可以像常规循环一样中断。只需在回调函数中使用return false即可。

const arr = [1, 2, 3, 4, 5];
$.each(arr, function(index, element){
  if (index === 3){
    return false;
  }
  console.log(index + ": " + element);
});

结果：

0: 1
1: 2
2: 3

结束语

each()方法是jQuery中非常有用的遍历方法。它在遍历数组和对象时非常方便，同时它也方便DOM操作，让操作DOM元素更加简单。使用each()方法可以让代码更加简洁明了。