jquery 里的each使用方法

2011-05-24 09:44 4014人阅读 评论(0) 收藏 举报
jquery each function object callback javascript

jQuery中的each函数很方便,$.each()函数封装了十分强大的遍历功能,它可以遍历一维数组、多维数组、DOM, JSON 等等,在javaScript开发过程中使用$each可以大大的减轻我们的工作量,这里贴一个简单的模仿each的函数,只能处理数组类型的对象

1 function each(arr,fn) {
2 for ( var i = 0, l = arr.length; i < l; fn.call(arr[i], i++));
3 }
4 var a=['first','second','third'];
5 each(a,function(i){alert(a[i])});

我们看下jQuery1.2.6中的each实现

01 function (object, callback, args) {
02 //该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数args
03 var name, i = 0,length = object.length;
04 if (args) {
05 if (length == undefined) {
06 for (name in object) {
07 if (callback.apply(object[name], args) === false) {
08 break;
09 }
10 }
11 } else {
12 for (; i < length;) {
13 if (callback.apply(object[i++], args) === false) {
14 break;
15 }
16 }
17 }
18 } else {
19 if (length == undefined) {
20 for (name in object) {
21 if (callback.call(object[name], name, object[name]) === false) {
22 break;
23 }
24 }
25 } else {
26 for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {}
27 /*object[0]取得jQuery对象中的第一个DOM元素,通过for循环,
28 得到遍历整个jQuery对象中对应的每个DOM元素,通过 callback.call( value,i,value);
29 将callback的this对象指向value对象,并且传递两个参数,i表示索引值,value表示DOM元素;
30 其中callback是类似于 function(index, elem) { ... } 的方法。
31 所以就得到 $("...").each(function(index, elem){ ... });
32 */
33 }
34 }
35 return object;
36 }

如果我们想中途continue 或者break循环怎么办

在jQuery的each()中

return true等于continue ;

return false等于break;

jquery中有两个each函数一个是jQuery.each()一个是jQuery.fn.each()

jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。

view sourceprint?
1 jQuery.prototype.each=function( fn, args ) {
2 return jQuery.each( this, fn, args );
3

}

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

jquery each循环相关推荐

  1. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  2. jq循环输出数组并显示在html,jquery怎么循环输出数组元素?

    jquery怎么循环输出数组元素?下面本篇文章给大家介绍一下使用jquery循环输出数组元素的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用JQuery循环输出数组元素即数 ...

  3. jquery 终止循环_JQuery跳出each循环的方法

    一.jquery each循环,要实现break和continue的功能: break----用return false; continue --用return ture; 二.jquery怎么跳出当 ...

  4. jquery的循环方法和extend方法

    目录 jquery的循环方法 jquery的extend方法 jquery的循环方法 jQuery存在隐式迭代,会在一些我们需要循环操作的时候 自动给我们进行循环 但是 隐式迭代 在某些特定情况下 无 ...

  5. jquery each循环遍历完再执行的方法

    jquery each循环遍历完再执行的方法 因为each是异步的 所以要加计数器. var eachcount=0; $(".emptytip").each(function() ...

  6. jquery for循环_前端基础入门五(掌握jQuery的常用api,实现动态效果)

    jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果. 为什么要学习jQuery? [01-让div显示与设置内容.html] 使 ...

  7. jquery for循环

    jQuery 中可以使用 $.each 方法来进行循环.该方法接受两个参数:第一个参数是要循环的数组或对象,第二个参数是一个回调函数,在每次循环时都会执行该回调函数. 例如,假设你有一个数组 arr, ...

  8. jquery ajax循环调用,每个循环jQuery中的Ajax调用

    这是一个函数,我必须通过ajax调用写入一个xml文件.该代码在第一次进行ajax调用时工作正常.在每个循环的第二个循环中,ajax调用完全没有进行.我不知道为什么.我指定asyn为false.这没有 ...

  9. jquery 终止循环_jquery $.each 和for怎么跳出循环终止本次循环

    如何在jquery 中的循环中终止本次循环或者跳出循环呢?查些资料,并且试验过发现下面方法可以 1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2. ...

  10. jquery文字循环滚动播报实现

    题引 需要实现一个从右往左,文字循环滚动播报的功能 工具:jquery 演示地址1(这个慢) 演示地址2(点这个) 思路 <div id="barrageInfo">& ...

最新文章

  1. 推荐 2个十分好用的 pandas 数据探索分析神器!
  2. 孩子、老人与海豚,如何用 AI 伴他们走出孤独
  3. '_NamespacePath' object has no attribute 'sort'
  4. SQL Server 中常见的十张系统表
  5. 显著改善分割预测,ETH开源基于情景图储存网络的视频目标分割|ECCV2020
  6. Linux内核:容器底层cgroup如何使用
  7. 网络中服务器是指为网络提供资源,并对这些资源进行管理的计算机,2016年职称计算机考试Internet冲刺试题及答案3...
  8. 万维网之父:Facebook、Google 等硅谷巨头必须被拆分!
  9. error LNK2019: 无法解析的外部符号 _WinMain@16
  10. 2022 XbotPark(冬季)科创训练营重庆明月湖站总结
  11. 微信小程序豆瓣电影(上)
  12. LTE-网络架构及网元实体
  13. Java面试基础(二)
  14. SATA学习笔记 13 ---SATA NCQ
  15. 第三方INF不包含数字签名信息
  16. c语言pow函数精度差,pow()函数结果强制转化为int造成误差的分析
  17. 1转自 饮水思源 bbs.sjtu.edu.cn·[FROM: 202.120.25.97]
  18. 通俗易懂介绍英语中Being与having been 的区分
  19. HTML显示日期时间代码 - [js 特效代码]
  20. 里约奥运|高科技助力 本届奥运会有待打破更多记录

热门文章

  1. DevOps升级amp;AIOps落地,看看这些大厂都是怎么做的?
  2. 20P25 Premiere预设24个三维金属质感文字标题动画 Gold Titles Kit
  3. 元素入栈顺序确定,共有多少种出栈顺序?----Python
  4. 2022年的职称你通过了吗
  5. 机械设计与计算机技术相关的论文,计算机技术在机械设计制造中的应用及发展方向...
  6. jquery 循环执行ajax
  7. bui java_bui-bootstrap java中比较好看的后台那界面,简介 管理 Develop 238万源代码下载- www.pudn.com...
  8. lpddr3 阻抗_手机参数科普:LPDDR3 和 LPDDR4差距太大
  9. CUDA安装失败问题解决(windows)
  10. 许进教授计算机成果,IEEE Tnnls首篇报道北大信息科学技术学院许进教授团队提出的“一种从底层全并行的计算模型——探针机”...