深入理解jQuery中的each方法

写在前面

我们先回顾一下数组中的forEach方法吧。在数组的实例上有个forEach方法供所有实例使用，forEach里面接收一个回调函数，而且回调函数默认接收三个参数：当前项，索引，数组 。forEach循环有个特点，就是无论如何都会把数据遍历完成。

 

each方法

 

each方法不仅是jQuery的静态方法而且还是jQuery元素原型中的方法

 

静态方法通过：$.each(数组或对象，函数) 这样的形式执行，注意：数组和对象都可以作为参数哦

原型方法通过：$(匹配元素集合) .each(函数) 这样的形式执行

 

其实不管是静态方法还是原型中的方法，都是执行同一个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;
    }

上面是jQuery的静态方法，下面是原型上的方法

each: function( callback ) {
        return jQuery.each( this, callback );
    },

原型上的each方法只是把this当做参数传入了，也就是参数obj，each方法中的还通过is ArrayLike来判断是不是类数组，然后在循环，如果是对象也做了处理，要注意的是回调函数，如果回调函数返回false值那么each方法将会停止遍历，这是一个很大的区别。

 

如果的jQuery的原型不理解可以先阅读

wuxianqiang/blog