当前位置:首页 > jquery

jquery中each方法

2026-03-17 08:18:01jquery

jQuery 中的 each 方法

jQuery 的 each 方法用于遍历 jQuery 对象或普通数组/对象,并对每个元素执行回调函数。以下是其用法和示例:

遍历 jQuery 对象

语法:

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

示例:

jquery中each方法

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

遍历普通数组或对象

语法:

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

示例:

$('li').each(function(index, element) {
  if (index === 2) return false; // 终止遍历
  console.log($(element).text());
});

注意事项

  • 回调函数中的 this 指向当前元素(等同于 element)。
  • 使用 $.each 时,若遍历对象是 DOM 元素集合,需先转换为数组(如 $.each($('li').get(), ...))。

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

相关文章

react 如何引入jquery

react 如何引入jquery

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

jquery之家

jquery之家

jQuery之家资源推荐 jQuery之家(通常指提供jQuery相关资源的网站或社区)是开发者获取插件、教程和代码示例的重要平台。以下是几个与jQuery相关的优质资源网站: 1. jQuery官…

下载jquery

下载jquery

下载 jQuery 的方法 官方网站下载 访问 jQuery 的官方网站 https://jquery.com,点击页面上的“Download”按钮。选择压缩版(minified)或未压缩版(unco…

jquery 下载

jquery 下载

jQuery 下载方法 官方网站下载 访问 jQuery 官网,点击页面上的“Download”按钮。官网提供两个版本: 压缩版(Production):文件名类似 jquery-x.x.x.m…

jquery加载

jquery加载

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

jquery效果

jquery效果

jQuery 动画效果 jQuery 提供了多种内置动画效果,可用于实现平滑的页面交互。常用的方法包括 show()、hide()、toggle()、fadeIn()、fadeOut()、slideU…