当前位置:首页 > jquery

jquery的each循环

2026-03-17 02:57:12jquery

jQuery 的 each 循环方法

jQuery 提供了 each() 方法用于遍历集合(如数组、对象或 jQuery 对象)。以下是两种常见的用法:

遍历数组或对象

语法:

$.each(collection, function(index, value) {
    // 操作逻辑
});
  • collection:需要遍历的数组或对象。
  • index:当前元素的索引(数组)或键名(对象)。
  • value:当前元素的值。

示例(遍历数组):

var arr = ["a", "b", "c"];
$.each(arr, function(i, val) {
    console.log("索引:" + i + ",值:" + val);
});

示例(遍历对象):

var obj = { name: "John", age: 30 };
$.each(obj, function(key, val) {
    console.log("键:" + key + ",值:" + val);
});

遍历 jQuery 对象

语法:

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

示例(遍历所有 <li> 元素):

$("li").each(function(i, el) {
    console.log("索引:" + i + ",文本内容:" + $(el).text());
});

中断循环

each() 中返回 false 可中断循环,类似 break

$.each([1, 2, 3], function(i, val) {
    if (val === 2) return false; // 中断循环
    console.log(val);
});

跳过当前迭代

返回 trueundefined 可跳过当前迭代,类似 continue

jquery的each循环

$.each([1, 2, 3], function(i, val) {
    if (val === 2) return true; // 跳过本次循环
    console.log(val);
});

注意事项

  • 使用 $.each() 时,第一个参数是集合,第二个是回调函数。
  • 使用 $(selector).each() 时,回调函数直接作用于 jQuery 对象。
  • 回调函数中的 this 指向当前元素(DOM 元素或对象值)。

标签: jqueryeach
分享给朋友:

相关文章

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 显示隐藏的元素可以通过多种方式实现,以下是几种常见的方法: 显示元素的基本方法 $("#element").show(); 这会直接将匹配的元素设置…

jquery id

jquery id

jQuery 通过 ID 选择元素的方法 在 jQuery 中,可以通过 ID 选择器快速获取 DOM 元素。ID 选择器使用 # 符号加上元素的 ID 名称。 语法示例: $("#eleme…

jquery跳转

jquery跳转

jQuery 页面跳转方法 使用 jQuery 实现页面跳转有多种方式,以下是几种常见的方法: 使用 window.location.href $(document).ready(function…