jquery.入口函数
这是jQuery.each()函数的广泛概述，此函数是jQuery最重要和最常用的函数之一。 在本文中，我们将找出原因，并看看如何使用它。
什么是jQuery.each（）
jQuery的each（）函数用于遍历目标jQuery对象的每个元素，该对象包含一个或多个DOM元素，并公开所有jQuery函数。 这对于多元素DOM操作以及遍历任意数组和对象属性非常有用。
除了此功能外，jQuery还提供了一个具有相同名称的帮助程序函数，而无需事先选择或创建任何DOM元素即可调用该函数。
jQuery.each（）语法
让我们看看实际的不同模式。
下面的示例选择网页上的每个<div>元素，并输出每个元素的索引和ID：
// DOM ELEMENTS
$('div').each(function(index, value) {
console.log(`div${index}: ${this.id}`);
});
可能的输出为：
div0:header
div1:main
div2:footer
该版本使用jQuery的$(selector).each()函数，而不是实用程序函数。
下一个示例显示了实用程序功能的用法。 在这种情况下，将循环对象作为第一个参数。 在此示例中，我们将展示如何遍历数组：
// ARRAYS
const arr = [
'one',
'two',
'three',
'four',
'five'
];
$.each(arr, function(index, value) {
console.log(value);
// Will stop running after "three"
return (value !== 'three');
});
// Outputs: one two three
在最后一个示例中，我们要演示如何迭代对象的属性：
// OBJECTS
const obj = {
one: 1,
two: 2,
three: 3,
four: 4,
five: 5
};
$.each(obj, function(key, value) {
console.log(value);
});
// Outputs: 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
`
第一个参数是当前索引，它可以是数字（对于数组）或字符串（对于对象）。
1.基本的jQuery.each（）函数示例
让我们看看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.sitepoint.com/">SitePoint</a>
<a href="https://developer.mozilla.org">MDN web docs</a>
<a href="http://example.com/">Example Domain</a>
第二个示例将输出：
https://www.sitepoint.com/
https://developer.mozilla.org/
http://example.com/
我们应该注意，来自jQuery对象的DOM元素在传递给jQuery.each()的回调中以其“本机”形式存在。 原因是jQuery实际上只是DOM元素数组的包装。 通过使用jQuery.each() ，此数组的迭代方式与普通数组相同。 因此，我们不会把包装好的元素开箱即用。
填补您的JS知识空白
在扎实的基础上培养您JavaScript技能。
立即阅读书
参考第二个示例，这意味着我们可以通过编写this.href获得元素的href属性。 如果要使用jQuery的attr()方法，则需要像这样重新包装元素： $(this).attr('href') 。
2. jQuery.each（）数组示例
让我们再看看如何处理普通数组：
const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
console.log(`${index}: ${value}`);
});
该代码段输出：
0:1
1:2
2:3
3:4
4:5
这里没什么特别的。 数组具有数字索引，因此我们获得从0到N-1的数字，其中N是数组中元素的数量。
3. jQuery.each（）JSON示例
我们可能具有更复杂的数据结构，例如数组中的数组，对象中的对象，对象中的数组或数组中的对象。 让我们看看jQuery.each()如何在这种情况下为我们提供帮助：
const colors = [
{ 'red': '#f00' },
{ 'green': '#0f0' },
{ 'blue': '#00f' }
];
$.each(colors, function() {
$.each(this, function(name, value) {
console.log(`${name} = ${value}`);
});
});
此示例输出：
red = #f00
green = #0f0
blue = #00f
我们通过对jQuery.each()的嵌套调用来处理嵌套结构。 外部调用处理可变colors的数组; 内部调用处理单个对象。 在此示例中，每个对象只有一个键，但是通常，此代码可以处理任何数量的键。
4. jQuery.each（）类示例
此示例显示如何遍历具有以下HTML中给定的class productDescription每个元素：
<div class="productDescription">Red</div>
<div>Pink</div>
<div class="productDescription">Orange</div>
<div class="generalDescription">Teal</div>
<div class="productDescription">Green</div>
我们在选择器上使用each()帮助器而不是each()方法。
$.each($('.productDescription'), function(index, value) {
console.log(index + ':' + $(value).text());
});
在这种情况下，输出为：
0:Red
1:Orange
2:Green
我们不必包含索引和值。 这些只是有助于确定我们当前正在迭代的DOM元素的参数。 此外，在这种情况下，我们还可以使用each方法更加方便。 我们可以这样写：
$('.productDescription').each(function() {
console.log($(this).text());
});
我们将在控制台上获得它：
Red
Orange
Green
请注意，我们将DOM元素包装在一个新的jQuery实例中，以便可以使用jQuery的text()方法获取该元素的文本内容。
5. jQuery.each（）延迟示例
在下一个示例中，当用户单击ID为5demo的元素时，所有列表项将立即设置为橙色。
<ul id="5demo">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
一个索引相关的延迟（0，200，400，...毫秒）后，我们淡出元件：
$('#5demo').on('click', function(e) {
$('li').each(function(index) {
$(this).css('background-color', 'orange')
.delay(index * 200)
.fadeOut(1500);
});
e.preventDefault();
});
结论
在本文中，我们演示了如何使用jQuery.each()函数迭代DOM元素，数组和对象。 这是开发人员应在其工具箱中使用的功能强大且省时的小功能。
而且，如果不是jQuery，您可能想看看使用JavaScript的本机Object.keys（）和Array.prototype.forEach（）方法。 还有诸如foreach之类的库，可让您遍历数组对象或字典对象的键值对。
请记住： $.each()和$(selector).each()是用两种不同方式定义的两种不同方法。
这篇颇受欢迎的文章于2020年进行了更新，以反映当前的最佳实践，并更新结论中有关使用现代JavaScript的本机解决方案的建议。 要获得更深入JavaScript知识，请阅读我们的书： JavaScript：Ninja的新手，第二版 。
翻译自: https://www.sitepoint.com/jquery-each-function-examples/
jquery.入口函数
