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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
JavaScript中的对象化编程
Jan 16 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
javascript几个易错点记录
Nov 26 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 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&amp;mysql(三)
2006/10/09 PHP
PHP 模板高级篇总结
2006/12/21 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
php常用hash加密函数
2014/11/22 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
Script的加载方法小结
2011/01/12 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
jQuery实现验证用户登录
2019/12/10 jQuery
跟老齐学Python之Import 模块
2014/10/13 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
PyTorch-GPU加速实例
2020/06/23 Python
python 常见的排序算法实现汇总
2020/08/21 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
机械个人求职信范文
2014/01/24 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
二胎满月酒致辞
2015/07/29 职场文书
干部外出学习心得体会
2016/01/18 职场文书