jquery each循环
jquery 里的each使用方法
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内部的子元素进行逐个调用。
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提供的each方法的具体实现, 1.obj对象是数组 } } } 还是通过实例来说明吧 先看代码: $("#submit").click(function(){ 通过throw 然后catch实现,也可以做了计数器到最后判断他的值! 上面的代码似乎和标题没什么关系,那么在each里如何实现break与continue 其实看下面还是有关系的… $('input').each(function(){ jquery里面应该是迭代每一个元素后查看返回的值,判断是否继续迭代下一个元素 var arr = [ "one", "two", "three", "four"]; var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]] var obj = { one:1, two:2, three:3, four:4}; |
jquery each循环相关推荐
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- jq循环输出数组并显示在html,jquery怎么循环输出数组元素?
jquery怎么循环输出数组元素?下面本篇文章给大家介绍一下使用jquery循环输出数组元素的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用JQuery循环输出数组元素即数 ...
- jquery 终止循环_JQuery跳出each循环的方法
一.jquery each循环,要实现break和continue的功能: break----用return false; continue --用return ture; 二.jquery怎么跳出当 ...
- jquery的循环方法和extend方法
目录 jquery的循环方法 jquery的extend方法 jquery的循环方法 jQuery存在隐式迭代,会在一些我们需要循环操作的时候 自动给我们进行循环 但是 隐式迭代 在某些特定情况下 无 ...
- jquery each循环遍历完再执行的方法
jquery each循环遍历完再执行的方法 因为each是异步的 所以要加计数器. var eachcount=0; $(".emptytip").each(function() ...
- jquery for循环_前端基础入门五(掌握jQuery的常用api,实现动态效果)
jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果. 为什么要学习jQuery? [01-让div显示与设置内容.html] 使 ...
- jquery for循环
jQuery 中可以使用 $.each 方法来进行循环.该方法接受两个参数:第一个参数是要循环的数组或对象,第二个参数是一个回调函数,在每次循环时都会执行该回调函数. 例如,假设你有一个数组 arr, ...
- jquery ajax循环调用,每个循环jQuery中的Ajax调用
这是一个函数,我必须通过ajax调用写入一个xml文件.该代码在第一次进行ajax调用时工作正常.在每个循环的第二个循环中,ajax调用完全没有进行.我不知道为什么.我指定asyn为false.这没有 ...
- jquery 终止循环_jquery $.each 和for怎么跳出循环终止本次循环
如何在jquery 中的循环中终止本次循环或者跳出循环呢?查些资料,并且试验过发现下面方法可以 1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2. ...
- jquery文字循环滚动播报实现
题引 需要实现一个从右往左,文字循环滚动播报的功能 工具:jquery 演示地址1(这个慢) 演示地址2(点这个) 思路 <div id="barrageInfo">& ...
最新文章
- 推荐 2个十分好用的 pandas 数据探索分析神器!
- 孩子、老人与海豚,如何用 AI 伴他们走出孤独
- '_NamespacePath' object has no attribute 'sort'
- SQL Server 中常见的十张系统表
- 显著改善分割预测,ETH开源基于情景图储存网络的视频目标分割|ECCV2020
- Linux内核:容器底层cgroup如何使用
- 网络中服务器是指为网络提供资源,并对这些资源进行管理的计算机,2016年职称计算机考试Internet冲刺试题及答案3...
- 万维网之父:Facebook、Google 等硅谷巨头必须被拆分!
- error LNK2019: 无法解析的外部符号 _WinMain@16
- 2022 XbotPark(冬季)科创训练营重庆明月湖站总结
- 微信小程序豆瓣电影(上)
- LTE-网络架构及网元实体
- Java面试基础(二)
- SATA学习笔记 13 ---SATA NCQ
- 第三方INF不包含数字签名信息
- c语言pow函数精度差,pow()函数结果强制转化为int造成误差的分析
- 1转自 饮水思源 bbs.sjtu.edu.cn·[FROM: 202.120.25.97]
- 通俗易懂介绍英语中Being与having been 的区分
- HTML显示日期时间代码 - [js 特效代码]
- 里约奥运|高科技助力 本届奥运会有待打破更多记录
热门文章
- DevOps升级amp;AIOps落地,看看这些大厂都是怎么做的?
- 20P25 Premiere预设24个三维金属质感文字标题动画 Gold Titles Kit
- 元素入栈顺序确定,共有多少种出栈顺序?----Python
- 2022年的职称你通过了吗
- 机械设计与计算机技术相关的论文,计算机技术在机械设计制造中的应用及发展方向...
- jquery 循环执行ajax
- bui java_bui-bootstrap java中比较好看的后台那界面,简介 管理 Develop 238万源代码下载- www.pudn.com...
- lpddr3 阻抗_手机参数科普:LPDDR3 和 LPDDR4差距太大
- CUDA安装失败问题解决(windows)
- 许进教授计算机成果,IEEE Tnnls首篇报道北大信息科学技术学院许进教授团队提出的“一种从底层全并行的计算模型——探针机”...