华山资源网

jQuery.each使用详解
网络编程 2024/11/15 佚名
3 1

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 );
});

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

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

其实在源码中实例（原型）方法也是调用的静态方法，所以分析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 );
  },

在原型方法中直接把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;
  },

东西也不是很多，首先接受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

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

} 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;
          }
        }
      }
    }

根据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;
  } )

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

return object;

最后返回原对象或者数组等

以上所述就是本文的全部内容了，希望大家能够喜欢。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com