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

示例:

jquery each

$.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 选择器用于选取 DOM 元素,基于 CSS 选择器语法扩展。通过 $() 或 jQuery() 函数调用,返回匹配元素的集合。 常见选择器类型…

jquery 图表

jquery 图表

jQuery 图表库推荐 jQuery 本身不直接提供图表功能,但可以通过插件或集成其他库实现图表绘制。以下是几种常用的 jQuery 图表解决方案: Chart.js 集成 Chart.j…

jquery时间

jquery时间

jQuery 时间处理 jQuery 本身不提供专门的时间处理函数,但可以通过 JavaScript 的 Date 对象结合 jQuery 的事件和方法来实现时间操作。以下是常见的时间处理需求及实现方…

jquery 样式

jquery 样式

jQuery 样式操作 jQuery 提供了多种方法来操作 HTML 元素的样式,包括直接修改 CSS 属性、添加或移除类、获取样式值等。 修改 CSS 属性 使用 css() 方法可以直接修改元素…

jquery框架

jquery框架

jQuery框架简介 jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画设计和Ajax交互。其核心特点是“写得更少,做得更多”,通过封装常见任务,降低跨浏览器…

jquery获取标签

jquery获取标签

jQuery获取标签的方法 jQuery提供了多种选择器和方法来获取HTML标签元素,以下是一些常见的方式: 通过标签名选择元素 使用标签名直接选择元素,例如选择所有<div>标签:…