jQuery的.each()知识梳理

工作中有时候涉及到前端页面的编码其中有一部分是跟jQuery有关，很多时候都是边用边google的或者直接看官方API，问题也基本都解决了但是对于用到的函数、技巧以及相关知识点等等很多都是知其一不知其二，所以忙里偷闲查阅资料和前辈的博客做一个简单笔记方便自己查阅如有不正之处望大家拍砖指正。

下面说一下jQuery遍历用到的一个函数：each函数。一般来说each函数有两大类用法下面分别说来

（一）

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

      含义：

遍历一个由jQuery选择器选中后的DOM集合的jQuery对象，并为每一个与之匹配的DOM元素（element）提供一个可执行的回调函数function(index,element)。

      回调函数：

该函数是在这个语法中不可或缺的，它提供两个参数第一个参数index表示循环被执行的次数也可以理解为当前元素（element）在集合中位置，在这里可以类比Java中或者JavaScript中的for（int i=0; i < 集合长度 ;i++）循环中的“i”；当然了毋庸置疑index是从0开始计数的。第二个参数表示循环当前的元素；需要注意的是因为该函数是在当前DOM元素为上下文的语境中触发的因此关键字this总是指向当前元素，简单说也可使用 "this" 选择器

      跳出循环：

在Java语言的for，while等循环中有关键字break和continue来终止循环和跳出当前循环，但是jQuery并没有提供这个关键字那么要实现类似break和continue效果可以通过return语句来做；如果要终止循环就在回调函数中直接返回false即可（return  false）；如果只是跳出当前循环进入下一个循环那么返回true即可（return true）。

$(selector).each(function(index,element){
//continue----相当于普通循环的continue效果
return true;
});	

$(selector).each(function(index,element){
//break----相当于普通循环的break效果
return false;
});

      注意：

jQuery对象本质近似看成全部jQuery方法的容器和一个DOM元素数组，每一个jQuery对象的方法在jQuery原型属性prototype中得来；所以一般我们使用选择器选中HTML树种的DOM元素时其实就是把找到的DOM元素存放在一个jQuery对象的DOM数组中，然后返回这个jQuery对象（返回的是一个数组集合），此时如果调用jQuery的函数比如说html()，jQuery方法会遍历内部的DOM数组调用对应的DOM属性或者方法如：innerHTML来完成操作；其中jQuery对象遍历jQuery集合（DOM数组）中的元素被称为：隐式迭代的过程，当这种隐式迭代的情况发生时通常是不需要显式的使用.each()方法。

// The .each() method is unnecessary here:
$( "li" ).each(function() {
  $(this).addClass( "foo" );
}); 
 
// Instead, you should rely on implicit iteration:
$( "li" ).addClass( "bar" );

（二）$.each()

含义：

该函数可以遍历各种集合、数组、对象、JSON等等用法和（一）中的函数基本一致。

用法小结：

1、遍历对象：

$.each(obj,function(){
this//这里的this指向每次遍历中Object的当前属性值
});

2、遍历数组：（可以通过嵌套$.each来处理多维数组。）

$.each(array,function(){
this //这里的this指向每次遍历中array当中当前元素
	//可以给function写上参数。index，value
});

3、遍历JSON：

$.each(jsonObj,function(key,value){
//在这里可以循环到每一个属性。
});

each源码：

each: function( obj, callback ) {
        var length, i = 0;
        if ( isArrayLike( obj ) ) {
            length = obj.length;
            for ( ; i < length; i++ ) {
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }
        }
        return obj;
 }

大概原理：obj[i]取得jQuery对象中的第i个DOM元素，通过for循环，得到遍历整个jQuery对象中对应的每个DOM元素，通过 callback.call( value,i,value);将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；其中callback是类似于 function(index, elem) { ... } 的方法。所以就得到 $("...").each(function(index, elem){ ... });