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 学习笔记(四)
Dec 31 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
JavaScript进阶(四)原型与原型链用法实例分析
May 09 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中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
利用php生成验证码
2017/02/23 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
js 学习笔记(三)
2009/12/29 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
TypeScript中的方法重载详解
2019/04/12 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python完全新手教程
2007/02/08 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
python实现批量命名照片
2020/06/18 Python
python解包概念及实例
2021/02/17 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
浅谈python中的多态
2021/06/15 Python