jQuery中each()方法怎么用

# jQuery中each()方法怎么用

## 一、each()方法概述

jQuery中的`each()`方法是用于遍历对象和数组的核心工具，它提供了一种简洁高效的方式来迭代处理jQuery对象或普通数组/对象中的元素。与JavaScript原生的`for`循环相比，`each()`具有更优雅的语法和更好的兼容性。

### 基本语法形式：
```javascript
// 遍历jQuery集合
$(selector).each(function(index, element){
  // 操作代码
});

// 遍历普通数组/对象
$.each(collection, function(indexInArray, valueOfElement){
  // 操作代码
});

二、两种使用场景详解

1. 遍历jQuery对象

当我们需要操作通过选择器获取的DOM元素集合时：

$('li').each(function(index, element){
  console.log(`索引 ${index}:`, element);
  $(this).css('color', 'red'); // 将每个li文字变为红色
});

参数说明： - index：当前元素在集合中的索引（从0开始） - element：当前的DOM元素（原生对象） - this关键字也指向当前DOM元素（jQuery对象）

2. 遍历普通数组/对象

处理非jQuery集合的数组或对象时：

// 遍历数组
const colors = ['red', 'green', 'blue'];
$.each(colors, function(index, value){
  console.log(`颜色${index}: ${value}`);
});

// 遍历对象
const person = {name: 'John', age: 30};
$.each(person, function(key, value){
  console.log(`${key}: ${value}`);
});

三、实际应用案例

案例1：表格行操作

$('tr').each(function(i){
  if(i % 2 === 0) {
    $(this).addClass('even-row');
  }
});

案例2：表单验证

let isValid = true;
$('input[required]').each(function(){
  if(!$(this).val()) {
    isValid = false;
    $(this).addClass('error');
  }
});

案例3：数据聚合

let total = 0;
$('.price').each(function(){
  total += parseFloat($(this).text());
});
$('#total').text(total.toFixed(2));

四、进阶技巧

1. 中断循环

通过返回false可以提前终止遍历：

$('a').each(function(){
  if($(this).attr('href') === '#') {
    console.log('发现空链接');
    return false; // 相当于break
  }
});

2. 跳过当前迭代

返回true等价于continue：

$.each([1,2,3,4], function(i, val){
  if(val % 2 === 0) return true;
  console.log('奇数:', val);
});

3. 上下文绑定

可以指定回调函数的this指向：

const processor = {
  log: function(idx, val) {
    console.log(this.prefix + val);
  },
  prefix: '值: '
};

$.each(['a','b','c'], processor.log.bind(processor));

五、与原生方法对比

六、性能优化建议

1. 缓存选择器结果：

   const $items = $('.item'); // 先缓存
   $items.each(function(){...});
   

2. 减少DOM操作： “`javascript // 不好的写法 \(('div').each(function(){ \)(this).css(‘color’, ‘red’); });

// 好的写法（直接批量操作） $(‘div’).css(‘color’, ‘red’);

3. **复杂数据处理时**，考虑先用原生数组方法处理再生成DOM

## 七、常见问题解答

### Q1: each()和map()有什么区别？
- `each()`用于执行操作但不返回值
- `map()`会返回一个新数组

### Q2: 为什么回调参数顺序是index在前？
保持与JavaScript原生forEach()一致，且大多数情况下索引比元素本身使用频率更高

### Q3: 能遍历NodeList吗？
可以，jQuery会自动处理类数组对象：
```javascript
$.each(document.querySelectorAll('p'), function(){...});

结语

jQuery的each()方法虽然简单，但通过灵活运用可以解决各种遍历需求。在现代化项目中，虽然原生JavaScript的forEach、for...of等新特性逐渐取代了部分jQuery需求，但在维护老项目或需要兼容旧浏览器时，掌握each()方法仍然非常必要。 “`

（注：实际字符数约为1150字，可根据需要增减案例或调整说明部分的详细程度达到精确字数要求）