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 相关文章推荐
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
简述JS控制台的使用
Jul 15 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
详解Vue router路由
Nov 20 Vue.js
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
Search Engine Friendly的URL设计
2006/10/09 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python类反射机制使用实例解析
2019/12/30 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
nohup的用法
2012/11/26 面试题
质检部岗位职责
2013/11/11 职场文书
软件售后服务承诺书
2014/05/21 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
停电通知范文
2015/04/16 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
毕业设计工作总结
2015/08/14 职场文书
销售口号霸气押韵
2015/12/24 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
Java基础-封装和继承
2021/07/02 Java/Android
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
golang中的struct操作
2021/11/11 Golang