当前位置:首页 > 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
分享给朋友:

相关文章

react 如何引入jquery

react 如何引入jquery

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

jquery库

jquery库

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

jquery 图表

jquery 图表

jQuery 图表库推荐 jQuery 本身不直接提供图表功能,但可以通过插件或集成其他库实现图表绘制。以下是几种常用的 jQuery 图表解决方案: Chart.js 集成 Chart.j…

jquery点击

jquery点击

jQuery 点击事件绑定方法 使用 jQuery 绑定点击事件可以通过多种方式实现,以下是几种常见的方法: click() 方法绑定 $("#elementId").click(function…

下载jquery

下载jquery

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

jquery 样式

jquery 样式

jQuery 样式操作 jQuery 提供了多种方法来操作 HTML 元素的样式,包括直接修改 CSS 属性、添加或移除类、获取样式值等。 修改 CSS 属性 使用 css() 方法可以直接修改元素…