JQuery中each()的使用方法说明


Posted in Javascript onAugust 19, 2010

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

each函数根据参数的类型实现的效果不完全一致:

1、遍历对象(有附加参数)

$.each(Object, function(p1, p2) {

     this;       //这里的this指向每次遍历中Object的当前属性值

     p1; p2;     //访问附加参数

}, ['参数1', '参数2']);

2、遍历数组(有附件参数)

$.each(Array, function(p1, p2){

     this;       //这里的this指向每次遍历中Array的当前元素

     p1; p2;     //访问附加参数

}, ['参数1', '参数2']);

3、遍历对象(没有附加参数)

$.each(Object, function(name, value) {

     this;      //this指向当前属性的值

     name;      //name表示Object当前属性的名称

     value;     //value表示Object当前属性的值

});

4、遍历数组(没有附加参数)

$.each(Array, function(i, value) {

     this;      //this指向当前元素

     i;         //i表示Array当前下标

     value;     //value表示Array当前元素

});

下面提一下jQuery的each方法的几种常用的用法

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.3.2的官方文档中的描述如下:

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。

意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

而后面的callback 则是回调函数,指示遍历元素的时候应该赋予的操作。先看下面的一个简单的例子:
迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

<img/><img/>jQuery 代码: 

$("img").each(function(i){ 

this.src = "test" + i + ".jpg"; 

});

结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
当然,在遍历元素的时候,jquery是允许自定义跳出的,请看示例代码:你可以使用 'return' 来提前跳出 each() 循环。
HTML 代码:
<button>Change colors</button> 

<span></span> 

<div></div> 

<div></div> 

<div></div> 

<div></div> 

<div id="stop">Stop here</div> 

<div></div> 

<div></div> 

<div></div>

jQuery 代码:
$("button").click(function(){ 

$("div").each(function(index,domEle){ 

$(domEle).css("backgroundColor","wheat"); 

if($(this).is("#stop")){ 

$("span").text("在div块为#"+index+"的地方停止。"); 

return false; 

} 

});

或者这么写:
$("button").click(function(){ 

$("div").each(function(index){ 

$(this).css("backgroundColor","wheat"); 

if($(this).is("#stop")){ 

$("span").text("在div块为#"+index+"的地方停止。"); 

return false; 

} 

});

图解:
JQuery中each()的使用方法说明

each() 方法规定为每个匹配元素规定运行的函数。

提示:返回 false 可用于及早停止循环。
语法
$(selector).each(function(index,element))参数 描述
function(index,element) 必需。为每个匹配元素规定运行的函数。
•index - 选择器的 index 位置
•element - 当前的元素(也可使用 "this" 选择器

实例
输出每个 li 元素的文本:

$("button").click(function(){ 

$("li").each(function(){ 

alert($(this).text()) 

}); 

});

实例
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指针引用数组或是对象的子元素。

那怎么跳出each呢
jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后,要跳出这个循环。
javascript的跳出循环一般用break.
同事遇到这个问题,下意识 的用了break,想跳出这个循环。结果报错
SyntaxError: unlabeled break must be inside loop or switch
经查,应该用一个
在回调函数里return false即可,大多数jq的方法都是如此的

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。 

返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
Javascript 相关文章推荐
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
Sea.JS知识总结
May 05 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
jquery获取input的value问题说明
Aug 19 #Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 #Javascript
JavaScript学习历程和心得小结
Aug 16 #Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 #Javascript
javascript下高性能字符串连接StringBuffer类
Aug 16 #Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 #Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 #Javascript
You might like
php构造函数实例讲解
2013/11/13 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
使用Apache的rewrite
2021/03/09 Servers
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
js给selected添加options的方法
2015/05/06 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
webpack之devtool详解
2018/02/10 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
Python psutil模块简单使用实例
2015/04/28 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
清华大学自主招生自荐信
2014/01/29 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS