jQuery源码分析之jQuery.fn.each与jQuery.each用法

本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法。分享给大家供大家参考。具体分析如下：

先上例子，下面代码的作用是：对每个选中的div元素，都给它们添加一个red类
代码如下:$('div').each(function(index, elem){
 
    $(this).addClass('red');
}
});

上面用的的.each，即jQuery.fn.each，其内部是通过jQuery.each实现的
代码如下:jQuery.fn.each
先贴一下类官方API说明，非常简单，只有两点需要注意
上文例子里的$(this).addClass('red')，其中，this指的是当前操作的dom元素
each中传入的方法，可以返回任意值，当返回的值为false时，跳出当前循环操作
代码如下:/**
 
 * @description 对jQuery对象中，匹配的的每个dom元素执行一个方法
 
 * @param {Number} index 当前处理元素在集合中的位置
 
 * @param {DOMElement} Element 当前处理的dom元素
 
*/
.
.each( function(index, Element) )
下面举两个简单的例子

例子一：

给页面所有的div元素添加red类
代码如下:$('div').each(function(index, elem){
 
    $(this).addClass('red');
}
});
例子二

给页面前5个div元素添加red类
代码如下:$('div').each(function(index, elem){
 
    if(index>=5) return false;  // 跳出循环
    $(this).addClass('red');
}
});
如上，用法挺简单，不赘述，详细可查看 http://api.jquery.com/each/

源码内部是通过jQuery.each实现的，下面就讲下jQuery.each的源码，讲完jQuery.each的源码，jQuery.fn.each的源码就很简单了
 
jQuery.each：

同样是先上一个简单的例子
代码如下:$.each([52, 97], function(index, value) {
  alert(index + ': ' + value + ':' + this);
}
});
输出内容如下：

0: 52-52
1
1: 97-97

类官方API说明

同样是有两个注意点

上面例子中的this，是集合中的元素，即下面的 valueOfElement
在callback中返回false，可以跳出循环
代码如下:/**
 
 * @description 对集合（数组或对象）中的每个元素，执行某个操作
 
 * @param {Number|String} indexInArray 元素在集合中对应的位置（如集合为数组，则为数字；如集合为对象，则为键值）
 
 * @param {AnyValue} valueOfElement 集合中的元素
 
*/
j
jQuery.each( collection, callback(indexInArray, valueOfElement) )
 
例子一
代码如下:$.each( ['one,'two','three', 'four'], function(index, value){
 
    if(index >= 2) return false;