当前位置:首页 > 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 对象)。

示例:

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

遍历数组或对象

语法:

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

数组示例:

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 循环。

jquery each

标签: jqueryeach
分享给朋友:

相关文章

jquery教程

jquery教程

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

jquery下载

jquery下载

jQuery下载方法 官方下载渠道 访问jQuery官网(https://jquery.com/),点击页面中的“Download”按钮。提供两个版本选择: Production版本:压缩后的精…

jquery怎么读

jquery怎么读

jQuery的发音 jQuery的正确发音为 "jay-query"(/ˈdʒeɪkwɪəri/)。其中: "jay" 发字母 "J" 的音(如英文单词 "jump" 的首音)。 "query"…

jquery版本

jquery版本

jQuery是一个快速、简洁的JavaScript库,用于简化HTML文档遍历、事件处理、动画设计和Ajax交互。以下是关于jQuery版本的详细信息: jQuery版本分类 jQuery主要分为…

react 如何引入jquery

react 如何引入jquery

引入 jQuery 到 React 项目 在 React 项目中引入 jQuery 可以通过多种方式实现,但需要注意 React 和 jQuery 操作 DOM 的方式可能冲突,因此建议仅在必要时使用…

jquery教程

jquery教程

jQuery 教程:基础与实用方法 jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心特点是“写得更少…