当前位置:首页 > 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
分享给朋友:

相关文章

react 如何引入jquery

react 如何引入jquery

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

jquery获取

jquery获取

获取元素 使用jQuery选择器获取元素,通过CSS选择器或jQuery特定选择器定位目标元素。常见选择器包括ID选择器(#id)、类选择器(.class)、标签选择器(tag)等。示例: $('#…

jquery 选择

jquery 选择

jQuery 选择器基础 jQuery 选择器基于 CSS 选择器语法,用于快速定位和操作 DOM 元素。核心语法为 $() 或 jQuery(),括号内传入选择器表达式。 // 选择所有 <…

jquery加载

jquery加载

jQuery 加载方法 使用 CDN 加载 jQuery 推荐通过公共 CDN(如 Google、Microsoft 或 jQuery 官方)加载,速度快且可能已被浏览器缓存。 <…

jquery 菜单

jquery 菜单

jQuery 菜单实现方法 使用 jQuery 创建动态菜单可以通过多种方式实现,以下是几种常见的方法: 基于 HTML 和 CSS 的基础结构 创建菜单的 HTML 结构通常使用无序列表 <…

jquery 返回

jquery 返回

jQuery 返回顶部功能实现 使用jQuery实现返回顶部功能可以通过监听滚动事件和动画滚动效果来完成。以下是几种常见的实现方法: 监听滚动事件并显示/隐藏返回按钮 $(window).scro…