jQuery each()方法的使用方法


Posted in Javascript onMarch 18, 2010

jQuery和jQuery对象都实现了该方法,对于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所采用的一种实现方式。
在jQuery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。
下面简单介绍一下call方法。
call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
引用网上有一个很经典的例子
Js代码
function add(a,b) 
{ 
alert(a+b); 
} 
function sub(a,b) 
{ 
alert(a-b); 
} 
add.call(sub,3,1);

用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
具体call更深入的就不在这里提了。
下面提一下jQuery的each方法的几种常用的用法
Js代码
var arr = [ "one", "two", "three", "four"]; 
$.each(arr, function(){ 
alert(this); 
}); 
//上面这个each输出的结果分别为:one,two,three,four 
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]] 
$.each(arr1, function(i, item){ 
alert(item[0]); 
}); 
//其实arr1为一个二维数组,item相当于取每一个一维数组, 
//item[0]相对于取每一个一维数组里的第一个值 
//所以上面这个each输出分别为:1 4 7 
var obj = { one:1, two:2, three:3, four:4}; 
$.each(obj, function(key, val) { 
alert(obj[key]); 
}); 
//这个each就有更厉害了,能循环每一个属性 
//输出结果为:1 2 3 4
Javascript 相关文章推荐
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
jQuery each()小议
Mar 18 #Javascript
jquery ajax执行后台方法
Mar 18 #Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 #Javascript
javascript 验证日期的函数
Mar 18 #Javascript
12个非常有创意的JavaScript小游戏
Mar 18 #Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 #Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 #Javascript
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python实现定时同步本机与北京时间的方法
2015/03/24 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
python实现批量注册网站用户的示例
2019/02/22 Python
Python中的asyncio代码详解
2019/06/10 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
会计电算化专业毕业生推荐信
2013/12/24 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
企业负责人任命书
2014/06/05 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
大学生作弊检讨书
2014/09/11 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL