位置：文档库 > JavaScript > jQuery中each方法的使用详解

jQuery中each方法的使用详解

如日方升上传于 2020-07-09 09:08

《jQuery中each方法的使用详解》

jQuery作为一款轻量级的JavaScript库，以其简洁的语法和强大的DOM操作能力深受开发者喜爱。其中，$.each()和$(selector).each()方法作为遍历集合的核心工具，在处理数组、对象或DOM元素时发挥着关键作用。本文将通过理论解析、场景示例和性能对比，全面剖析这两个方法的用法与差异，帮助开发者高效运用它们解决实际问题。

一、each方法的基础概念

jQuery中的each方法分为两种形式：全局的$.each()和实例的$(selector).each()。前者用于遍历任意JavaScript对象或数组，后者专用于遍历jQuery对象中的DOM元素集合。

1.1 语法结构

$.each(object, callback)的参数说明：

object：待遍历的对象（数组、类数组对象或普通对象）
callback：每次迭代执行的函数，接收两个参数：index（当前索引）和value（当前值）

$(selector).each(callback)的参数说明：

callback：针对每个DOM元素执行的函数，接收两个参数：index（元素索引）和element（当前DOM元素，注意非jQuery对象）

1.2 回调函数中的this指向

在$(selector).each()中，回调函数的this指向当前DOM元素，可通过$(this)转换为jQuery对象。而在$.each()中，this默认指向全局对象（window），需显式使用参数访问值。

二、$.each()的深度解析

2.1 遍历数组

const arr = ['apple', 'banana', 'orange'];
$.each(arr, function(index, value) {
  console.log(`索引: ${index}, 值: ${value}`);
});
// 输出：
// 索引: 0, 值: apple
// 索引: 1, 值: banana
// 索引: 2, 值: orange

当需要提前终止遍历时，可通过返回false实现，这与原生for循环中的break类似。

2.2 遍历对象

const obj = { name: 'Alice', age: 25, city: 'New York' };
$.each(obj, function(key, value) {
  console.log(`键: ${key}, 值: ${value}`);
});
// 输出：
// 键: name, 值: Alice
// 键: age, 值: 25
// 键: city, 值: New York

注意对象遍历的顺序可能因浏览器实现而异，若需保证顺序，建议先将键排序后遍历。

2.3 遍历类数组对象

对于arguments或DOM节点集合等类数组对象，$.each()同样适用：

function demo() {
  $.each(arguments, function(i, arg) {
    console.log(`参数${i}: ${arg}`);
  });
}
demo('a', 'b', 'c');

三、$(selector).each()的实战应用

3.1 操作DOM元素集合

最常见的场景是为多个元素绑定事件或修改属性：

$('div').each(function(index, element) {
  $(element).css('color', index % 2 === 0 ? 'red' : 'blue');
});

此处通过索引的奇偶性设置不同颜色，展示了如何结合索引进行条件判断。

3.2 处理表单元素

批量获取表单值并构建数据对象：

const formData = {};
$('input[type="text"]').each(function() {
  const name = $(this).attr('name');
  formData[name] = $(this).val();
});

3.3 动态生成内容

结合模板字符串生成列表项：

const items = ['Item 1', 'Item 2', 'Item 3'];
const $ul = $('');
$.each(items, function(i, item) {
  $ul.append(`${item}`);
});
$('body').append($ul);

四、each方法与原生循环的对比

4.1 性能分析

在处理大型数组时，原生for循环通常更快：

// 测试代码
const largeArray = new Array(100000).fill(0);
console.time('$.each');
$.each(largeArray, function() {});
console.timeEnd('$.each'); // 约15ms

console.time('for');
for (let i = 0; i

结论：对性能敏感的场景优先使用原生循环，jQuery的each方法更适合需要兼容性或简化代码的场景。

4.2 代码简洁性比较

假设需遍历对象并过滤属性：

// jQuery方式
const filtered = {};
$.each({ a: 1, b: 2, c: 3 }, function(k, v) {
  if (v > 1) filtered[k] = v;
});

// ES6方式
const filteredES6 = Object.entries({ a: 1, b: 2, c: 3 })
  .filter(([_, v]) => v > 1)
  .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});

jQuery版本在简单场景下更直观，而ES6方法在复杂逻辑中更具表现力。

五、常见问题与解决方案

5.1 this与参数的混淆

错误示例：

$('li').each(function() {
  console.log(this); // 正确：DOM元素
  console.log($(this).text()); // 正确：转换为jQuery对象
  console.log($(arguments[0]).text()); // 错误：arguments在此无效
});

解决方案：始终通过参数或this访问当前元素。

5.2 异步操作中的遍历

当回调中包含异步操作（如AJAX）时，需注意闭包问题：

// 错误示例：所有请求使用同一个闭包变量
let results = [];
$('button').each(function(i) {
  $.get('/api').then(data => {
    results[i] = data; // 可能因异步顺序错乱
  });
});

// 正确做法：使用IIFE创建独立作用域
$('button').each(function(i) {
  (function(index) {
    $.get('/api').then(data => {
      results[index] = data;
    });
  })(i);
});

5.3 与map/reduce的替代方案

jQuery未提供类似Array.prototype.map的方法，但可通过以下方式模拟：

const values = [];
$('input').each(function() {
  values.push($(this).val());
});
// 等同于ES6的
const valuesES6 = [...$('input')].map(el => $(el).val());

六、高级技巧与最佳实践

6.1 链式调用中的each

将each融入jQuery链式调用：

$('div')
  .filter('.highlight')
  .each(function() {
    $(this).addClass('processed');
  })
  .css('background', 'yellow');

6.2 性能优化建议

对静态集合缓存jQuery对象：const $elems = $('.class');
避免在each回调中重复查询DOM
大数据集考虑分页或虚拟滚动

6.3 与现代框架的协作

在React/Vue等框架中，jQuery的each方法通常不推荐直接使用，但在遗留系统集成或第三方插件依赖时仍可能遇到。此时应限制其作用范围，避免与框架的响应式系统冲突。

七、完整示例：表格数据处理

以下示例展示如何遍历表格行并计算每列总和：

// HTML

  
Name
Score

  
Alice
85

  
Bob
92



// JavaScript
$(document).ready(function() {
  const $table = $('#data-table');
  const $headerCells = $table.find('th');
  const $rows = $table.find('tr').slice(1); // 跳过表头
  
  // 计算每列总和
  $headerCells.slice(1).each(function(colIndex) {
    let sum = 0;
    $rows.each(function() {
      const value = parseInt($(this).find('td').eq(colIndex).text());
      if (!isNaN(value)) sum += value;
    });
    $table.append(`
Total
${sum}
`);
  });
});

Name	Score
Alice	85
Bob	92

八、总结与展望

jQuery的each方法通过统一的接口简化了不同类型数据的遍历操作，尤其在处理DOM集合时提供了比原生循环更简洁的语法。尽管现代前端开发中，原生ES6方法或框架内置工具逐渐占据主流，但掌握jQuery的each方法仍有助于维护遗留项目或快速原型开发。

未来，随着浏览器对ES6+的全面支持，开发者可更多使用Array.prototype.forEach、for...of等原生特性。但在需要兼容旧浏览器或利用jQuery生态的场景下，each方法依然是可靠的选择。

关键词：jQuery、each方法、DOM遍历、数组遍历、对象遍历、性能优化、异步处理、链式调用

简介：本文详细解析了jQuery中$.each()和$(selector).each()方法的用法，涵盖基础语法、数组/对象遍历、DOM操作、性能对比、常见问题及高级技巧，通过代码示例和场景分析帮助开发者全面掌握这两种遍历方法的应用。

立即下载

JavaScript相关