当前位置：首页 > jquery

jquery遍历数组

2026-02-03 16:51:15jquery

jQuery 遍历数组的方法

jQuery 提供了多种方法来遍历数组或类数组对象，以下是常用的几种方式：

$.each() 方法

$.each() 是 jQuery 提供的通用遍历方法，适用于数组和对象。语法如下：

$.each(array, function(index, value) {
    // 处理逻辑
});

示例：

jquery遍历数组

var arr = [10, 20, 30];
$.each(arr, function(i, val) {
    console.log("索引：" + i + ", 值：" + val);
});

$(selector).each() 方法

主要用于遍历 jQuery 对象集合，但也可用于普通数组：

$(array).each(function(index, value) {
    // 处理逻辑
});

示例：

jquery遍历数组

var arr = ["a", "b", "c"];
$(arr).each(function(i, item) {
    console.log(item);
});

原生 JavaScript 方法

jQuery 数组本质是 JavaScript 数组，因此可以直接使用原生方法：

forEach:

arr.forEach(function(item, index) {
    console.log(item);
});

for 循环:

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

处理对象数组

当数组包含对象时，遍历方式相同但可访问对象属性：

var users = [{name: "John"}, {name: "Jane"}];
$.each(users, function(i, user) {
    console.log(user.name);
});

注意事项

$.each() 和 $(...).each() 的区别：前者是工具方法，后者是实例方法。
在 each 回调中使用 return false 可以终止遍历（类似 break）。
性能考虑：原生 for 循环通常比 jQuery 方法更快，适合大数据量遍历。

示例：综合应用

var data = [5, 10, 15];
// jQuery 方式
$.each(data, function(i, num) {
    $("#result").append("<li>" + num + "</li>");
});
// 原生方式
data.forEach(function(num) {
    console.log(num * 2);
});

标签: 遍历数组

分享给朋友：

vue 实现数组排序

在 Vue 中实现数组排序的方法使用 JavaScript 原生排序方法 Vue 中可以直接调用 JavaScript 的 Array.prototype.sort() 方法对数组进行排序。对于数字…

vue实现数组监听

监听数组变化的方法 Vue.js 提供了多种方式来监听数组的变化，主要包括以下几种方法：使用 Vue 的响应式系统 Vue 通过重写数组的原型方法（如 push、pop、shift、unsh…

vue实现数组排序

vue实现数组排序的方法在Vue中实现数组排序主要依赖JavaScript的数组排序方法，结合Vue的响应式特性确保视图同步更新。以下是几种常见实现方式：使用JavaScript原生sort方法…

实现vue数组双向绑定

Vue 数组双向绑定的实现方法 Vue 通过数据劫持和发布-订阅模式实现数据的双向绑定，但直接修改数组的某些方法（如索引赋值）无法触发视图更新。以下是实现数组双向绑定的几种方法：使用 Vue.se…

vue实现数组双向绑定

实现数组双向绑定的方法在Vue中，实现数组的双向绑定通常需要结合v-model指令或自定义事件处理。以下是几种常见的方法：使用v-model绑定数组 Vue的v-model指令默认支持表单元素…

vue怎样实现数组绑定

Vue 实现数组绑定的方法 Vue 提供了多种方式来实现数组的绑定，以下是常见的几种方法：使用 v-for 指令绑定数组通过 v-for 指令可以遍历数组并渲染列表。语法如下： <ul&…

jquery遍历数组