关于jQuery中的each方法(jQuery到底干了什么)

关于jQuery中的each方法

什么是each方法？

在jQuery中，each()方法是一个用于迭代集合中每个元素的函数。具体来说，它允许您迭代对象（如HTML元素数组或JavaScript对象）并执行函数中传递的回调函数。每个元素都作为参数传递给回调函数，并可以执行所需的操作。

each方法的语法

$(selector).each(function(index,element) {
    //需要执行的操作
});

each方法的参数

在jQuery中，each()方法接受两个参数：

• index：每个元素的索引
• element：当前迭代的元素

您可以使用这些参数执行所需的操作。例如，您可以使用索引来找到特定元素，或者使用元素数据执行操作。

each方法的示例

示例一

下面的示例演示了如何使用jQuery的each()方法迭代数组中的元素，并使用元素和索引执行操作。

var cars = ["Volvo", "BMW", "Audi", "Mercedes"];

$.each(cars, function(index, value) {
  console.log(index + ": " + value);
});

上面的代码将迭代各个车型，并为每个车型记录其索引和名称。输出如下：

0: Volvo
1: BMW
2: Audi
3: Mercedes

示例二

下面的示例演示了如何使用jQuery的each()方法迭代HTML元素集合，并根据元素属性执行操作。

<ul>
  <li class="item" data-id="1">Item 1</li>
  <li class="item" data-id="2">Item 2</li>
  <li class="item" data-id="3">Item 3</li>
</ul>

$("li.item").each(function() {
  var id = $(this).attr("data-id");
  console.log("Item " + id + " is clicked");
});

上面的代码将迭代所有li元素，并记录其data-id属性。输出如下：

Item 1 is clicked
Item 2 is clicked
Item 3 is clicked

总结

通过使用each()方法，您可以轻松迭代任何类型的对象，并执行所需的操作。迭代数组或HTML元素集合是jQuery中使用each()方法的常见场景之一。