浅谈jquery中的each方法$.each、this.each、$.fn.each

jQuery是众所周知的一个强大的JavaScript库，其中关于遍历循环操作的方法非常丰富，其中就包括了很多类似于each方法的方法，它们的实现方法各异，解决的问题也不同。

$.each方法

$.each方法是jQuery库中常用的方法之一，它的作用是对一个对象或数组进行遍历循环操作。

语法：

$.each(collection, callback(indexInArray, valueOfElement));

• collection: 要遍历的数组或对象
• callback: 在每次遍历中需要执行的函数

其中callback函数有两个参数：

• indexInArray: 数组或对象中的索引或属性名
• valueOfElement: 数组或对象中当前被遍历的元素或属性值

$.each方法是一种极其强大和灵活的遍历方法，它可以轻松遍历对象、数组、类数组等各种形式的集合。下面是一个基本的示例：

$.each([0,1,2,3,4], function(index, value){
  console.log(index, value);
});

输出结果如下：

0 0
1 1
2 2
3 3
4 4

this.each方法

this.each方法通常是在jQuery插件的编写中用到的，它的作用是对当前jQuery对象中的每一个元素进行遍历循环操作。

语法：

this.each(callback(index, value));

其中callback函数有两个参数：

• index: 当前元素在jQuery对象中的索引
• value: 当前元素的DOM对象

可以看到，this.each方法的用法比$.each方法更加简单，没有参数，只需在回调函数中根据需要对当前元素进行操作即可。下面是一个基本的示例：

$.fn.sample = function(){
  this.each(function(index, element){
    console.log(index, element);
  });
  return this;
}

<div class="box">
  <p>hello</p>
  <p>world</p>
</div>

$(".box").sample();

输出结果如下：

0 <p>hello</p>
1 <p>world</p>

$.fn.each方法

$.fn.each方法与this.each方法非常相似，也是对jQuery对象中的每一个元素进行遍历循环操作的方法，但是它的语法与$.each有些类似，也可以接受一个对象或数组作为参数进行遍历操作。

语法：

$.fn.each(collection, callback(index, element));

其中：

• collection: 要遍历的对象或数组
• callback: 在每次遍历中需要执行的函数，第一个参数是key或索引，第二个参数是value或元素

下面是一个基本的示例：

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

$("li").each(function(index, element){
  console.log(index, element);
});

输出结果如下：

0 <li>item 1</li>
1 <li>item 2</li>
2 <li>item 3</li>

综上所述，$.each和$.fn.each可以用于任何类型的集合，而this.each只能用于当前jQuery对象中的DOM元素遍历。