jquery的each方法使用示例分享

对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说：jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。

代码如下:

jQuery.prototype.each=function( fn, args ) {
 return jQuery.each( this, fn, args );
}

让我们看一下jQuery提供的each方法的具体实现，jQuery.each(obj,fn,arg)

该方法有三个参数：进行操作的对象obj，进行操作的函数fn，函数的参数args。

让我们根据ojb对象进行讨论：

1. obj对象是数组

each方法会对数组中子元素的逐个进行fn函数调用，直至调用某个子元素返回的结果为false为止，也就是说，我们可以在提供的fn函数进行处理，使之满足一定条件后就退出each方法调用。当each方法提供了arg参数时，fn函数调用传入的参数为arg，否则为：子元素索引，子元素本身。

2. obj 对象不是数组

该方法同1的最大区别是：fn方法会被逐次不考虑返回值的进行进行。换句话说，obj对象的所有属性都会被fn方法进行调用，即使fn函数返回false。调用传入的参数同1类似。

代码如下:

jQuery.each=function( obj, fn, args ) {
    if ( args ) {
       if ( obj.length == undefined ){
           for ( var i in obj )
             fn.apply( obj, args );
       }else{
           for ( var i = 0, ol = obj.length; i < ol; i++ ) {
              if ( fn.apply( obj, args ) === false )
                  break;
          }
       }
   } else {
       if ( obj.length == undefined ) {
            for ( var i in obj )
               fn.call( obj, i, obj );
       }else{
          for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){}
       }
  }
  return obj;
}

需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式，这意味着，在你自己的fn的实现中，可以直接采用this指针引用数组或是对象的子元素。这种方式是绝大多数jQuery所采用的一种实现方式。

赞 (0)

相关推荐

  • 关于jQuery中的each方法(jQuery到底干了什么)

    关于jQuery中的each方法(jQuery到底干了什么)

    1. 估计很多人都会用到jQuery中的each方法. 那就来看一看jQuery都干了些什么. 找到jquery中的each源码: 复制代码 代码如下: each: function( object, callback, args ) { var name, i = 0, length = object.length, isObj = length === undefined || jQuery.isFunction( object ); if ( args ) { if ( isObj ) {

  • jquery each的几种常用的使用方法示例

    jQuery源码里自己也有很多用到each方法.其实jQuery里的each方法是通过js里的call方法来实现的.下面简单介绍一下call方法. call这个方法很奇妙,其实官方的说明是:"调用一个对象的一个方法,以另一个对象替换当前对象."网上更多的解释是变换上下文环境,也有说是改变上下文this指针. 复制代码 代码如下: call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 参数 thisObj  可选项.将被用作当前对象的对象.arg1,

  • jquery里的each使用方法详解

    each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用. 这个JQUERY里的核心代码 复制代码

  • jquery中each方法示例和常用选择器

    <head> <title></title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //alert($("div").text()); //对数组元素使用匿名函数进行逐个处理.

  • JQuery each打印JS对象的方法

    我们知道javascript可以用alert输出变量的值,但是有时候返回的是一个对象,json格式的数据,jQuery可以用这个方法循环遍历读出对象的值,假如这个对象名称是obj,循环遍历打印它的值: 复制代码 代码如下: $.each(obj,function(key,val){      if($.isPlainObject(val) || $.isArray(val)){          subObj(val);      }else{          alert(key+'='+va

  • jQuery中each()方法用法实例

    本文实例讲述了jQuery中each()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数. 当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的.通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成. each()方法不同于jQuery.each()方法 .each()方法只能够遍历JQuery对象,而jQu

  • jQuery each()方法的使用方法

    jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用. 复制代码 代码如下: jQuery.prototype.each=function( fn, args ) { return jQuery.each( t

  • Jquery each方法跳出循环,并获取返回值(实例讲解)

    return false:将停止循环 (就像在普通的循环中使用 'break').return true:跳至下一个循环(就像在普通的循环中使用'continue'). 复制代码 代码如下: function test(){var success = false;$(..).each(function () {   if (..) {       success = true;       return false;   }}); return success ;} jquery是对象链,所以$

  • JQuery中each()的使用方法说明

    JQuery中each()的使用方法说明

    each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用. each函数根据参数的类型实现的效果不完

  • 解析prototype,JQuery中跳出each循环的方法

    复制代码 代码如下: function chk(){        var flag=true;        var msg='';        var tips={'username':'姓名','tel':'电话','company':'公司名称','loupan_name':'楼盘名','sdate':'团购时间','content_1':'团购内容'};        $$('.required').each(function(el){            if($F(el).bl

随机推荐