当前位置:首页 > jquery

jquery each

2026-01-14 16:24:48jquery

jQuery each 方法详解

jQuery 的 each() 方法用于遍历 jQuery 对象或数组/对象,执行回调函数处理每个元素或属性。以下是具体用法和示例:

遍历 jQuery 对象

语法:

$(selector).each(function(index, element) {
  // 处理逻辑
});
  • index:当前元素的索引(从 0 开始)。
  • element:当前 DOM 元素(可用 $(element) 转换为 jQuery 对象)。

示例:

jquery each

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

遍历数组或对象

语法:

$.each(collection, function(indexOrKey, value) {
  // 处理逻辑
});
  • collection:数组或普通对象。
  • indexOrKey:数组时为索引,对象时为属性名。
  • value:当前元素的值。

数组示例:

jquery each

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);
});

注意事项

  • 遍历 DOM 元素时,回调函数中的 this 指向当前 DOM 元素(非 jQuery 对象)。
  • 使用 $.each 时,this 指向当前遍历的值。
  • 性能敏感场景建议优先使用原生 for 循环。

标签: jqueryeach
分享给朋友:

相关文章

jquery教程

jquery教程

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。其核心特点是“写得更少,做得更多”(Write Les…

jquery官网

jquery官网

jQuery 官网信息 jQuery 的官方网站是 jQuery.com,提供最新的 jQuery 版本下载、文档、教程和插件资源。 官网主要功能 下载 jQuery:提供压缩版(min…

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

jquery 面试题

jquery 面试题

以下是一些常见的 jQuery 面试题及其解答,涵盖基础概念、核心方法和实际应用场景。 jQuery 基础概念 jQuery 是什么? jQuery 是一个轻量级的 JavaScript 库,简化了…

jquery api

jquery api

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery API 的核心功能和使用方法: 选择器 jQuery…

jquery之家

jquery之家

jQuery之家相关资源 jQuery之家是一个提供jQuery插件、教程和资源的网站,适合开发者学习和使用jQuery技术。以下是关于jQuery之家的主要内容和资源: 网站内容 提供丰…