[分享]揭秘jQuery each：轻松掌握遍历数组与对象的秘密

jQuery 的 .each() 方法是处理 DOM 和数据的一种强大工具。它允许开发者遍历对象、数组或集合中的每个元素，并对每个元素执行操作。以下是关于 .each() 方法的详细指南，包括如何遍历...

jQuery 的 .each() 方法是处理 DOM 和数据的一种强大工具。它允许开发者遍历对象、数组或集合中的每个元素，并对每个元素执行操作。以下是关于 .each() 方法的详细指南，包括如何遍历数组、对象以及一些高级用法。

遍历数组

.each() 方法在遍历数组时非常方便。以下是一个简单的示例：

var arr = ['one', 'two', 'three'];
arr.each(function(index, value) { console.log(index + ': ' + value);
});

在这个例子中，.each() 方法遍历了数组 arr。回调函数接受两个参数：index 是当前元素的索引，value 是当前元素的值。上面的代码将输出：

0: one
1: two
2: three

遍历对象

除了数组，.each() 也可以用来遍历对象。以下是一个示例：

var obj = { one: 1, two: 2, three: 3
};
$.each(obj, function(key, value) { console.log(key + ': ' + value);
});

在这个例子中，.each() 遍历了对象 obj。回调函数同样接受两个参数：key 是对象的键名，value 是对应的值。输出结果为：

one: 1
two: 2
three: 3

注意，当对象的键名包含特殊字符（如冒号）时，需要使用方括号来访问该属性。

高级用法

条件遍历

在回调函数中，你可以添加条件判断来决定是否继续遍历。如果回调函数返回 false，则遍历会立即停止。

$.each(arr, function(index, value) { if (value === 'two') { return false; } console.log(index + ': ' + value);
});

上面的代码在输出 two 之后会停止遍历。

遍历 jQuery 对象

.each() 也可以用来遍历 jQuery 对象，例如 DOM 元素集合。

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

这个例子遍历了所有