jquery中$.each()的用法

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方法的几种常用的用法

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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;
}
});

图解:

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‘)。

您可能感兴趣的文章:

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

众生网络

品牌服务器租用

集思网络

VPS主机

枫信科技

IDC服务商

常用在线小工具

原文地址:https://www.cnblogs.com/xtmp/p/9116200.html

时间: 2024-10-26 21:32:39

jquery中$.each()的用法的相关文章

jQuery中attr()方法用法实例

本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元素指定属性的属性值. 代码如下: $(selector).attr(name) 参数列表: 参数 描述 name 定义要获取其值的属性名称. 实例代码: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="

jQuery中eq()方法用法

这篇文章主要介绍了jQuery中eq()方法用法,实例分析了eq()方法的功能.定义及获取匹配元素集上的相应位置索引元素的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代码如下: $(selector).eq(index) 参数列表: 参数 描述 index 定义元素在元素集中的索引,从零开始的.      如果是

jQuery中eq()方法用法实例

本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代码如下: $(selector).eq(index) 参数列表: 参数 描述 index 定义元素在元素集中的索引,从零开始的. 如果是负数则从最后一个元素往回计数. 越界无效. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head

jQuery中$.each的用法

jQuery中$.each的用法 本文导读:jQuery中each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用. jQuery中通过$.each,你可以遍历对象.数组的属性值并进行处理. 使用说明 1.遍历对象(有附加参数) $.each(Object, function(p1,

jQuery中$.when的用法

在开发中我们会遇到多重ajax调用的情况,这时比较适宜用$.when方法,无需再为每次调用请求分别定义一个回调. 使用实例: var serverData={}; var get1=$.get('/1').done(function(result){ serverData['1']=result; }); var get2=$.get('/2').done(function(result){ serverData['2']=result; }); $.when(get1,get2).done(f

jQuery中 end(); 的用法

jQuery中的end()方法的意思 选取某个元素,查找选取其子元素,然后再回过来选取这个元素.用例子说明了一下: 比如HTML代码: <p><span>Hello</span>,how are you?</p> JQuery代码: $("p").find("span").end(); 结果还是返回元素"P": [ <p><span>Hello</span> ho

jquery中done的用法

愁人,编程语言这个东西,学完了能常用还好点,要是不常用的话,过不了几天就忘记用法了,这不昨天在自己练习用django学工具的时候,竟然忘记了jquery中done的使用方法,但是却又很清楚的记得自己之前是用过的,就是想不起来,你说愁人不,写篇博客记录下吧. 以下样例是在YII框架下写的,在CSRF_TOKEN的地方各种框架都不尽相同: <script type="text/javascript"> $(document).ready(function(){ $("

jquery中filter的用法

一.filter的参数类型可分为两种 1.传递选择器 $('a').filter('.external') 2.传递过滤函数 $('a').filter(function(index) {        return $(this).hasClass('external');    }) 二.Jquery中find与filter区别 1.find()会在div元素内 寻找 class为classname的元素.2.filter()则是筛选div的class为classname的元素.3.基本是f

jQuery中each的用法之退出循环和结束本次循环

jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用continue来结束本次循环,想要实现类似的功能就只能用return,break           用return falsecontinue      用return ture