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

示例:

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

遍历普通数组或对象

语法:

$.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方法

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

注意事项

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

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

相关文章

jquery 面试题

jquery 面试题

jQuery 面试题常见考点 DOM 操作 选择器使用:$("#id"), $(".class"), $("tag") 元素增删改查:append(), remove(), html(),…

jquery文档

jquery文档

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

jquery作用

jquery作用

jQuery的作用概述 jQuery是一个快速、简洁的JavaScript库,主要用于简化HTML文档遍历、事件处理、动画设计和Ajax交互等操作。其核心目标是让开发者以更少的代码完成更多功能,同时解…

jquery 对话框

jquery 对话框

jQuery 对话框的实现方法 jQuery 对话框通常通过 jQuery UI 库中的 dialog() 方法实现。以下是几种常见的实现方式: 基本对话框实现 引入必要的 jQuery 和 jQ…

jquery 图片

jquery 图片

jQuery 图片操作 jQuery 提供了多种方法来操作图片,包括加载、显示、隐藏、调整尺寸等。以下是一些常见的图片操作方法: 动态加载图片 使用 attr() 方法可以动态修改图片的 src 属…

jquery添加

jquery添加

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