当前位置:首页 > 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插件库提供了丰富的扩展功能,帮助开发者快速实现常见的前端交互效果。以下是一些常用的jQuery插件库和资源: 1. 官方jQuery插件注册中心jQuery Pl…

jquery文档

jquery文档

以下是关于 jQuery 文档的核心内容和资源整理,便于快速查阅和使用: jQuery 官方文档 官网地址:jQuery Official Documentation 内容分类:API 参考…

jquery代码

jquery代码

以下是关于jQuery代码的常见用法和示例,涵盖基础操作、事件处理、DOM操作等核心功能: 基础语法 jQuery通过$()函数选择元素,支持CSS选择器语法: // 选择所有<p>…

jquery 使用

jquery 使用

jQuery 基础使用 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互的操作。以下是 jQuery 的基本使用方法。 引入…

jquery 隐藏

jquery 隐藏

jQuery 隐藏元素的方法 使用 jQuery 隐藏元素可以通过多种方式实现,以下是几种常见的方法: hide() 方法hide() 是最简单的隐藏元素方法,它会将元素的 display 属性设置…

jquery函数

jquery函数

jQuery 函数概述 jQuery 是一个快速、简洁的 JavaScript 库,通过封装原生 JavaScript 功能,简化 DOM 操作、事件处理、动画和 AJAX 等任务。其核心函数 $()…