jQuery.each使用详解


Posted in Javascript onJuly 07, 2015

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;

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

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

Javascript 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 #Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 #Javascript
浅谈JavaScript中运算符的优先级
Jul 07 #Javascript
浏览器中url存储的JavaScript实现
Jul 07 #Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 #Javascript
深入分析下javascript中的[]()+!
Jul 07 #Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 #Javascript
You might like
PHP编程风格规范分享
2014/01/15 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
python使用zip将list转为json的方法
2018/12/31 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
django中related_name的用法说明
2020/05/20 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
水利学院求职自荐书
2014/02/01 职场文书
《理想》教学反思
2014/02/17 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android