本文深入探讨 jQuery.each() 函数——jQuery 中最重要、最常用的函数之一。我们将探究其重要性，并学习如何使用它。
核心要点
什么是 jQuery.each()?
jQuery 的 each() 函数用于循环遍历目标 jQuery 对象的每个元素——包含一个或多个 DOM 元素的对象，并公开所有 jQuery 函数。它对于多元素 DOM 操作以及迭代任意数组和对象属性非常有用。
除了此函数外，jQuery 还提供了一个同名辅助函数，无需事先选择或创建任何 DOM 元素即可调用。
jQuery.each() 语法
让我们看看不同模式的实际应用。
以下示例选择网页上的每个 <div> 元素，并输出每个元素的索引和 ID：
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// DOM 元素
$('div').each(function(index, value) {
console.log(`div${index}: ${this.id}`);
});</pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div>
<p>可能的输出结果为：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>div0:header
div1:main
div2:footer</code></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div>
<p>此版本使用 jQuery 的 <code>$(selector).each() 函数，而不是实用函数。
下一个示例显示了实用函数的使用。在这种情况下，要循环遍历的对象作为第一个参数给出。在此示例中，我们将展示如何循环遍历数组：
// 数组
const arr = [
'one',
'two',
'three',
'four',
'five'
];
$.each(arr, function(index, value) {
console.log(value);
// 将在 "three" 后停止运行
return (value !== 'three');
});
// 输出：one two three在最后一个示例中，我们想演示如何迭代对象的属性：
// 对象
const obj = {
one: 1,
two: 2,
three: 3,
four: 4,
five: 5
};
$.each(obj, function(key, value) {
console.log(value);
});
// 输出：1 2 3 4 5所有这些都归结为提供适当的回调函数。回调函数的上下文 this 将等于其第二个参数，即当前值。但是，由于上下文始终是一个对象，因此必须包装原始值：
$.each({ one: 1, two: 2 } , function(key, value) {
console.log(this);
});
// Number { 1 }
// Number { 2 }这意味着值和上下文之间没有严格的相等性。
$.each({ one: 1 } , function(key, value) {
console.log(this == value);
console.log(this === value);
});
// true
// false第一个参数是当前索引，它是数字（对于数组）或字符串（对于对象）。
让我们看看 jQuery.each() 函数如何与 jQuery 对象结合使用。第一个示例选择页面中的所有 a 元素并输出它们的 href 属性：
$('a').each(function(index, value){
console.log(this.href);
});第二个示例输出网页上的每个外部 href（假设仅使用 HTTP(S) 协议）：
$('a').each(function(index, value){
const link = this.href;
if (link.match(/https?:\/\//)) {
console.log(link);
}
});假设页面上有以下链接：
<a href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a> <a href="https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a> <a href="https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a>
第二个示例将输出：
// DOM 元素
$('div').each(function(index, value) {
console.log(`div${index}: ${this.id}`);
});我们应该注意，来自 jQuery 对象的 DOM 元素在其传递给 jQuery.each() 的回调函数中的“原生”形式。原因是 jQuery 事实上只是 DOM 元素数组的包装器。通过使用 jQuery.each()，此数组的迭代方式与普通数组相同。因此，我们不会开箱即用地获得包装的元素。
关于我们的第二个示例，这意味着我们可以通过编写 this.href 来获取元素的 href 属性。如果我们想使用 jQuery 的 attr() 方法，我们需要像这样重新包装元素：$(this).attr('href')。
让我们再看看如何处理普通数组：
<code>div0:header div1:main div2:footer</code>
此代码段输出：
// 数组
const arr = [
'one',
'two',
'three',
'four',
'five'
];
$.each(arr, function(index, value) {
console.log(value);
// 将在 "three" 后停止运行
return (value !== 'three');
});
// 输出：one two three这里没有什么特别的。数组具有数字索引，因此我们获得从 0 开始到 N-1 的数字，其中 N 是数组中元素的数量。
我们可能有更复杂的数据结构，例如数组中的数组、对象中的对象、数组中的对象或对象中的数组。让我们看看 jQuery.each() 如何在这种情况下帮助我们：
// 对象
const obj = {
one: 1,
two: 2,
three: 3,
four: 4,
five: 5
};
$.each(obj, function(key, value) {
console.log(value);
});
// 输出：1 2 3 4 5此示例输出：
$.each({ one: 1, two: 2 } , function(key, value) {
console.log(this);
});
// Number { 1 }
// Number { 2 }我们使用嵌套调用 jQuery.each() 来处理嵌套结构。外部调用处理变量 colors 的数组；内部调用处理各个对象。在此示例中，每个对象只有一个键，但通常可以使用此代码处理任意数量的键。
此示例演示如何循环遍历分配了类 productDescription 的每个元素（在下面的 HTML 中给出）：
$.each({ one: 1 } , function(key, value) {
console.log(this == value);
console.log(this === value);
});
// true
// false我们使用 each() 辅助函数而不是选择器上的 each() 方法。
$('a').each(function(index, value){
console.log(this.href);
});在这种情况下，输出为：
$('a').each(function(index, value){
const link = this.href;
if (link.match(/https?:\/\//)) {
console.log(link);
}
});我们不必包含 index 和 value。这些只是帮助确定我们当前正在迭代哪个 DOM 元素的参数。此外，在这种情况下，我们还可以使用更方便的 each 方法。我们可以这样写：
<a href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a> <a href="https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a> <a href="https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a>
我们将在控制台中获得：
<code>https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7 https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846 https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1</code>
请注意，我们正在将 DOM 元素包装在一个新的 jQuery 实例中，以便我们可以使用 jQuery 的 text() 方法来获取元素的文本内容。
在下一个示例中，当用户单击 ID 为 5demo 的元素时，所有列表项将立即设置为橙色。
const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
console.log(`${index}: ${value}`);
});在索引相关的延迟（0、200、400……毫秒）之后，我们将元素淡出：
<code>0:1 1:2 2:3 3:4 4:5</code>
结论
在这篇文章中，我们演示了如何使用 jQuery.each() 函数迭代 DOM 元素、数组和对象。这是一个强大且节省时间的函数，开发人员应该将其纳入自己的工具包中。
如果 jQuery 不是您的首选，您可能需要考虑使用 JavaScript 原生的 Object.keys() 和 Array.prototype.forEach() 方法。还有一些像 foreach 这样的库，可以让您迭代类数组对象或字典式对象的键值对。
请记住：$.each() 和 $(selector).each() 是以两种不同方式定义的两种不同方法。
(本文已于 2020 年更新，以反映当前最佳实践，并更新结论中关于使用现代 JavaScript 的原生解决方案的建议。要了解更多 JavaScript 知识，请阅读我们的书籍《JavaScript：从新手到忍者，第二版》)
关于 jQuery each() 函数的常见问题
jQuery 中 .each() 函数的用途是什么？jQuery 中的 .each() 函数用于迭代 DOM 元素集合，并对每个元素执行特定操作。
如何在 jQuery 中使用 .each() 函数？您可以通过使用 jQuery 选择器选择一组元素，然后在该选择上调用 .each() 来使用 .each() 函数。您提供一个回调函数，该函数定义要对每个元素执行的操作。
与 .each() 一起使用的回调函数的参数是什么？回调函数接受两个参数：index（集合中元素的当前索引）和 element（正在迭代的当前 DOM 元素）。
如何在 .each() 回调函数中使用 index 参数？您可以使用 index 参数来跟踪集合中当前元素的位置，这对于条件操作或其他操作非常有用。
.each() 函数的一些常见用例是什么？常见的用例包括迭代元素列表以操作其属性、值或样式，以及对集合中的每个元素执行自定义操作。
以上是5 jQuery.EACH（）功能示例的详细内容。更多信息请关注PHP中文网其他相关文章！
