当前位置:首页 > jquery

jquery的each方法

2026-03-17 01:44:31jquery

jQuery 的 each() 方法

jQuery 的 each() 方法用于遍历一个 jQuery 对象或数组/对象,并对每个元素执行回调函数。它有两种形式:一种用于遍历 jQuery 对象,另一种用于通用遍历(类似 $.each())。

遍历 jQuery 对象

语法:

$(selector).each(function(index, element) {
  // 操作逻辑
});
  • index:当前元素的索引。
  • element:当前 DOM 元素(可直接用 this 代替)。

示例:

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

通用遍历($.each()

语法:

$.each(collection, function(index, value) {
  // 操作逻辑
});
  • collection:可以是数组或对象。
  • index:数组的索引或对象的键。
  • 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);
});

与原生 forEach 的区别

  • each() 可以遍历 jQuery 对象和通用集合,而 forEach 仅用于数组。
  • each() 支持中断逻辑(return false),而 forEach 无法直接中断。

注意事项

  • 使用 $(this)element 访问 DOM 元素时,确保元素存在。
  • 对于性能敏感的场景,原生循环(如 for)可能更快。

标签: 方法jquery
分享给朋友:

相关文章

vue实现方法

vue实现方法

Vue 实现方法 Vue 是一种流行的前端框架,用于构建用户界面和单页应用。以下是几种常见的 Vue 实现方法: 创建 Vue 实例 通过 new Vue() 创建一个 Vue 实例,传入配置对象,…

jquery选择

jquery选择

jQuery选择器基础 jQuery选择器基于CSS选择器语法,用于快速定位和操作DOM元素。通过$()或jQuery()函数传入选择器字符串实现。 常见选择器类型: 元素选择器:$("p") 选…

jquery添加

jquery添加

jQuery 添加元素的方法 在jQuery中,添加元素到DOM有多种方式,可以根据需求选择合适的方法。 append() 将内容插入到选定元素的内部末尾处。 $("#container").ap…

jquery a

jquery a

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够更…

jquery 高度

jquery 高度

jQuery 获取和设置元素高度的方法 使用 jQuery 可以方便地获取或设置元素的高度。以下是几种常用的方法: 获取元素高度 使用 height() 方法可以获取匹配元素中第一个元素的计算高度(…

jquery 返回

jquery 返回

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