jquery里的each使用方法详解


Posted in Javascript onDecember 22, 2010

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

这个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所采用的一种实现方式。

还是通过实例来说明吧

先看代码:

$("#submit").click(function(){ 
try{ 
$('#leftTbl tr').each(function(i){ 
var emailInput = $("#email_"+(1+i)); 
if(!re.test(emailInput.val())){ 
alert("请正确填写email"); 
emailInput.focus(); 
throw emailInput; 
}else{ 
email = emailInput.val(); 
} 
}); 
}catch(e){ 
return false; 
} 
$("#pageform").submit(); 
});

通过throw 然后catch实现,也可以做了计数器到最后判断他的值!

上面的代码似乎和标题没什么关系,那么在each里如何实现break与continue 其实看下面还是有关系的…

$('input').each(function(){ 
if($(this).val() == ''){ 
// do something 
if(1==1)return false; // 使用return false 来实现跳出循环。 
else return true; // 使用return true 来实现进入下一个循环。 
} 
});

jquery里面应该是迭代每一个元素后查看返回的值,判断是否继续迭代下一个元素
原创文章,转载请注明:同路吧 www.tlbar.com.cn
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 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
JS实现复制功能
Mar 01 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery学习笔记之jQuery的动画
Dec 22 #Javascript
jQuery学习笔记之jQuery的事件
Dec 22 #Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 #Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 #Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 #Javascript
jQuery学习笔记之Helloworld
Dec 22 #Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 #Javascript
You might like
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
javascript天然的迭代器
2010/10/29 Javascript
JavaScript中的类继承
2010/11/25 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
企业道德讲堂实施方案
2014/03/19 职场文书
《海底世界》教学反思
2014/04/16 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
详解Redis集群搭建的三种方式
2021/05/31 Redis
MySQL学习之基础命令实操总结
2022/03/19 MySQL