jQuery.each使用详解-js-Tutorial-php.cn

jQuery.each使用详解

高洛峰

Freigeben： 2016-12-29 11:06:36

Original

1038 人浏览过

jQuery.each方法是jQuery的核心工具方法之一，通用例遍方法，可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。通常需要两个参数

object:需要例遍的对象或数组。

callback:每个成员/元素执行的回调函数。

回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

例遍数组，同时使用元素索引和内容。举例如下：

//例遍对象，同时使用成员名称和变量内容。
 
$.each( [0,1,2], function(i, n){
 alert( "Item #" + i + ": " + n );
});
//例遍对象，同时使用成员名称和变量内容。
 
$.each( { name: "John", lang: "JS" }, function(i, n){
 alert( "Name: " + i + ", Value: " + n );
});

Nach dem Login kopieren

当然也可以直接使用实例调用

$( 'div' ).each( function(i,n){
  return i+n.text;
} )

Nach dem Login kopieren

其实在源码中实例（原型）方法也是调用的静态方法，所以分析each方法只需要分析其静态方法即可，实例调用只不过是静态方法使用中的一个特例罢了。

// Execute a callback for every element in the matched set.
  // (You can seed the arguments with an array of args, but this is
  // only used internally.)
  each: function( callback, args ) {
    return jQuery.each( this, callback, args );
  },

Nach dem Login kopieren

在原型方法中直接把this对象当作待遍历的对象传入，下面是静态方法的源码

// args is for internal usage only
  each: function( object, callback, args ) {
    var name, i = 0,
      length = object.length,
      isObj = length === undefined || jQuery.isFunction( object );
    if ( args ) {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.apply( object[ name ], args ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.apply( object[ i++ ], args ) === false ) {
            break;
          }
        }
      }
 
    // A special, fast, case for the most common use of each
    } else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }
 
    return object;
  },

Nach dem Login kopieren

东西也不是很多，首先接受3个参数，这个时候就要注意了在我们经常使用的手册中一般是写的两个参数的我们一般使用也是使用两个参数，但是其实在源码中是有3个参数可以接受的，其中第三个参数是一个数组，会作为回调函数的参数传入。

首先声明几个变量，i、name和length是为循环做准备的，isObj是为了区分待便利的参数是数组还是对象，通过判断该参数如果是函数或者length属性不存在来判断是对象，其他的就按数组或者类数组来处理。

isObj = length === undefined || jQuery.isFunction( object );
这一句写的很精简利用运算符的优先顺序先执行===

其实这样的判断并不是很精准只是一个大致的区分，比如：

var obj={length:'a'};
var isObj= obj.length=== undefined || jQuery.isFunction( obj );
alert(isObj); //false

Nach dem Login kopieren

然后就是根据是否添加第三个参数进行区分，先看下没有添加的情况也就是

} else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }

Nach dem Login kopieren

根据isObj变量“区分”数组和对象，对于数组使用for循环，对于对象采用for...in循环，每循环一此就会执行一次回调函数并把当前循环的数组或者对象键和值传进去，这里使用的call方法，第一个参数是函数的“this”也就是把当前循环的值作为this后面两个是键和值或者是指针和值，所以我们使用循环中使用回调函数的第二个参数跟使用this是一样的。比如：

//刚才的例子
 $( 'div' ).each( function(i,n){
    return i+n.text;
  } )
//等价于
 $( 'div' ).each( function(i,n){
    return i+this.text;
  } )

Nach dem Login kopieren

对于添加了第三个参数的情况而言就是改变了回调函数的传值方式，使用的是apply方法来传递参数，this指向的依然是当前值只不过把args也就是第三个参数数组传递进去，这个数组有多少参数那么回调函数就有多少参数可以用，这里需要注意的是第三个一定是js原声数组形式不能是类数组或者jQuery对象否则会报错因为apply方法不支持。如果回调函数返回false那么将跳过循环比如我们可以只处理奇数下标数组是可以判断是偶数项时在回调函数中执行return false即可