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 相关文章推荐
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
JS实现旋转木马轮播图
Jan 01 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
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程序时遇到的三个问题
2012/01/17 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python中的函数用法入门教程
2014/09/02 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
简介Django中内置的一些中间件
2015/07/24 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
Python sorted对list和dict排序
2020/06/09 Python
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
教师个人的自我评价分享
2014/01/02 职场文书
暑期实践思想汇报
2014/01/06 职场文书
高中生活自我鉴定
2014/01/18 职场文书
小学运动会口号
2014/06/07 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
实习单位推荐信
2015/03/27 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
二审答辩状格式
2015/05/22 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS