jQuery中$(selector).each()和$.each()的区别与应用

在Javascript开发过程中，jQuery作为一个强大的库，提供了多种便捷的方法来简化DOM操作和数据处理。其中，$(selector).each() 和 $.each() 是两个常用于遍历的函数。虽然它们的功能看起来相似，但使用场景和内部机制有所不同。

1. $(selector).each(function(index, element))

这个方法主要用于DOM元素的遍历。通过传入一个选择器，jQuery会找到页面上所有匹配的元素，并对每个元素执行指定的函数。该函数接受两个参数：当前元素的索引（index）和DOM元素本身（element）。

示例：

  
Coffee

  
Soda

  
Milk

Javascript代码：

function traversalDOM() {
  $('#each_id li').each(function(index, element) {
    console.log($(this).text());
  });
}

上述代码会依次输出列表项中的文本：“Coffee”、“Soda”、“Milk”。这种方法非常适合于需要对页面上的多个DOM元素进行相同操作的情况。

2. $.each(dataResource, function(index, value))

相比之下，$.each() 方法更加通用，不仅限于DOM元素的遍历，还可以用来遍历数组或对象。它同样接受一个回调函数作为参数，该函数会为数组的每个元素或对象的每个属性调用一次。对于数组，参数分别为当前元素的索引和值；对于对象，则分别为属性名和属性值。

示例：

var data = [1, 2, 3];
$.each(data, function(index, value) {
  console.log('Index: ' + index + ', Value: ' + value);
});

这段代码会输出数组中每个元素的索引和值。

总结：

- 当需要遍历DOM元素时，推荐使用 $(selector).each() 方法。
- 当需要遍历数组或对象时，推荐使用 $.each() 方法。

了解这些方法的区别有助于在实际开发中做出更合适的选择，提高代码的效率和可读性。