5个 jQuery.each（）函数示例

这是jQuery.each()函数的广泛概述，它是jQuery最重要和最常用的函数之一。 在本文中，我们将找出原因，并看看如何使用它。

这篇颇受欢迎的文章于2020年进行了更新，以反映当前的最佳实践，并更新结论中有关使用现代JavaScript的本机解决方案的建议。 要获得更深入的JavaScript知识，请阅读我们的书： JavaScript：Ninja的新手，第二版 。

什么是jQuery.each（）

jQuery的each（）函数用于遍历目标jQuery对象的每个元素，该对象包含一个或多个DOM元素，并公开所有jQuery函数。 这对于多元素DOM操作以及遍历任意数组和对象属性非常有用。

除了此功能外，jQuery还提供了一个具有相同名称的帮助程序函数，而无需事先选择或创建任何DOM元素即可调用该函数。

jQuery.each（）语法

让我们看看实际的不同模式。

下面的示例选择网页上的每个

元素，并输出每个元素的索引和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);
  }
});

假设我们在页面上有以下链接：

SitePoint
MDN web docs
Example Domain

第二个示例将输出：

https://www.sitepoint.com/
https://developer.mozilla.org/
http://example.com/

我们应该注意，来自jQuery对象的DOM元素在传递给jQuery.each()的回调中以其“本机”形式存在。 原因是jQuery实际上只是DOM元素数组的包装。 通过使用jQuery.each() ，此数组的迭代方式与普通数组相同。 因此，我们不会把包装好的元素开箱即用。

参考第二个示例，这意味着我们可以通过编写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每个元素：

Red
Pink
Orange
Teal
Green

我们在选择器上使用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的元素时，所有列表项将立即设置为橙色。

  
One
  
Two
  
Three
  
Four
  
Five

一个索引相关的延迟（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()是用两种不同方式定义的两种不同方法。

原文链接: https://www.sitepoint.com/jquery-each-function-examples/