实现jQuery.each方法

原创 2017年08月12日 21:25:54

参考JavaScript专题之jQuery通用遍历方法each的实现

$.each是一个通用的迭代函数,可以用来迭代数组与对象。

$.each(arr,function(index,value){
    ……
})

$.each(obj,function(prop,value){
    ……
})

$.each()函数和 $(selector).each()是不一样的,那个是专门用来遍历一个jQuery对象。$.each()函数可用于迭代任何集合,无论是“名/值”对象或数组。

那么我们该怎么实现这样一个 each 方法呢?

首先,我们肯定要根据参数的类型进行判断,如果是数组,就调用 for 循环,如果是对象,就使用 for in 循环。

function each(obj,callback){
    if(Array.isArray(obj)){
        for(var i=0;i<obj.length;i++){
            callback.call(obj[i],i,obj[i]);
        }
    }else{
        for(var prop in obj){
            callbackcall(obj[prop],prop,obj[prop]);
        }
    }
}

使用call调用回调函数是为了保证this的正确指向。

这个函数看起来与原生的forEach方法没有什么区别,但是$.each是支持在回调函数中返回return false来终止循环的。
这里我们也可以通过监测callback返回的值来实现:

function each(obj,callback){
    if(Array.isArray(obj)){
        for(var i=0;i<obj.length;i++){
            if(callback(i,obj[i]) === false){
                break;
            }
        }
    }else{
        for(var prop in obj){
            if(callback(prop,obj[prop]) === false){
                break;
            }
        }
    }
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript专题之jQuery通用遍历方法each的实现

JavaScript专题之jQuery通用遍历方法each的实现 JavaScript 专题系列第十一篇,讲解 jQuery 通用遍历方法 each 的实现 each介绍 jQu...

jQuery 链式编程/隐式迭代/each方法/多库共存

1.链式编程 // 链式编程代码示例 $(“li”).parent(“ul”).parent().siblings(“div”).children(“div”).html(“内容”); ...

jQuery each() 方法

概述:jQuery中的 each 函数很方便,$.each ()函数封装了十分强大的遍历功能,它可以遍历一维数组、多维数组、DOM ,JSON 等等。$.each()与$(selector).each...

Jquery的each(),attr()方法介绍

each()方法简单明了,有十分强大的遍历功能,可以对一维数组、多维数组、DOM, JSON 等等进行遍历: each()处理一维数组: var arr1 = [ "aaa", "bbb", "...
  • Luo_da
  • Luo_da
  • 2017年08月03日 10:12
  • 152

jQuery内核,以及自定义each和size方法

jQuery的内核;   (function( window, undefined ) {        //这就是jQuery的原型        var jQuery = function( se...

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

对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素...

jQuery学习03---map,each方法学习

map方法主要用于对数组进行遍历 /* map(callback)方法的使用 将一组元素转换成其他数组(不论是否是元素数组) ...

Jquery中each的三种遍历方法 转载

1、选择器+遍历 $('div').each(function (i){    i就是索引值    this 表示获取遍历每一个dom对象 }); 2、选择器+遍历 $('div')....
  • sonlife
  • sonlife
  • 2016年05月13日 10:12
  • 244

jQuery编程基础精华(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)

属性、表单过滤器 属性过滤选择器: $(“div[id]”)选取有id属性的 ("div[title=test]")选取title属性为“test”的,jQuery中没有对getElements...
  • SWSHBON
  • SWSHBON
  • 2016年04月29日 09:41
  • 662

jQuery15(元素each方法,表单选择器)

元素的each方法目前已知,radio,checkbox在jQuery中无法直接遍历,需要使用each方法进行遍历. 实例: ...
  • xbc1213
  • xbc1213
  • 2016年02月06日 21:58
  • 146
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现jQuery.each方法
举报原因:
原因补充:

(最多只允许输入30个字)