使用jQuery .each（）函数遍历数组或对象等不同的数据集

webstack • 2018年2月8日 pm10:19 • 教程 • 阅读 535

在这篇文章中，我们将研究jQuery each（）函数的用法，这将允许我们循环访问数组或对象等不同的数据集。 jQuery的each（）是jQuery中使用最广泛的函数之一，所以我认为了解你可以用它做什么是很重要的。
jQuery的每个函数都是用来循环数据的，最简单的方法就是和其他语言的foreach循环类似。因此，您可以使用它来循环来自相同选择器的多个DOM对象。例如，如果你想添加一个target =“_ blank”到页面上的所有链接，那么你将选择所有链接并循环遍历每个链接添加一个target =“_ blank”。

$('a').each(function(i){
    $(this).attr('target', '_blank');
});

让我们来看看这是如何工作的。首先，我们通过使用以下选择器来获取页面上的所有a链接。

// Get all anchor links
$('a')

接下来，我们使用每个函数来遍历所有的链接。

$('a').each(function(i){
    //Performs tasks to each of the links
});

当你在每个函数中时，你可以通过使用this关键字来访问当前元素，但是这个对象不是jQuery对象，因此如果它是一个DOM元素，你将不能使用任何jQuery函数在上面。解决这个问题的方法是把this包装在一个jQuery对象定义器中。

$('a').each(function(i){
    // Performs tasks to each of the links
    $(this);
});

当我们在jQuery对象中有当前的loop元素时，我们可以使用attr函数向链接添加一个新的属性。

$('a').each(function(i){
    $(this).attr('target', '_blank');
});

获取循环的当前索引

在上面的例子中，你会注意到function（）参数中的i。这个变量填充了每个当前索引，看到这个工作在页面上有10个链接。

<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
<a>Link 4</a>
<a>Link 5</a>
<a>Link 6</a>
<a>Link 7</a>
<a>Link 8</a>
<a>Link 9</a>
<a>Link 10</a>

然后通过提醒用户，输出当前索引。

$('a').each(function(i){
    alert(i);
});

通过数组循环

在上面的例子中，您已经看到了如何选择DOM元素并遍历它们，但是也可以使用它循环访问数据数组，并获取数组中的位置索引和值。

var fruit = ['orange', 'apple', 'banana', 'grapes', 'kiwi'];
$.each(fruit, function(index, value){
  console.log(index + ' ' + value);
});

在控制台中，它将输出以下内容：
“0 orange””1 apple””2 banana””3 grapes””4 kiwi”

通过对象循环

如果你使用对象来存储数据，而不是数组，那么每个函数都会按照你在下面的代码中看到的方式来处理。

var fruitObj = {
   1: 'orange',
   2: 'apple',
   3: 'banana',
   4: 'grapes',
   5: 'kiwi'
};
$.each(fruitObj, function(key, value){
  console.log(key + ' ' + value);
});

循环通过对象的输出如下
“1 orange””2 apple””3 banana””4 grapes””5 kiwi”

原创文章，作者：webstack，如若转载，请注明出处：https://www.webstacks.cn/tutorial/1191.html

使用jQuery .each（）函数遍历数组或对象等不同的数据集

获取循环的当前索引

通过数组循环

通过对象循环

相关推荐

发表评论