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 相关文章推荐
js select常用操作控制代码
Mar 16 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
react如何快速设置文件路径别名
Apr 28 Javascript
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
php 上传功能实例代码
2010/04/13 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
面包屑导航详解
2017/12/07 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
大学生专科毕业生自我评价
2013/11/17 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
网络管理员岗位职责
2015/02/12 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS