举例说明jquery中each函数的使用,jquery each()

举例说明jquery中each函数的使用,jquery each(),JQuery中each()的使用方法说明

对于jQuery对象,我们简单地委托每个方法:我们将jQuery对象作为第一个参数传递给jQuery的每个方法。换句话说,jQuery提供的每个方法都对parameter提供的对象的所有子元素逐一进行方法调用。

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

根据参数的类型,每个功能的效果并不完全一致:

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

复制代码如下:

$.每个(对象,函数(p1,p2) {

这个;//此处指向每次遍历中Object的当前属性值

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

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

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

复制代码如下:

$.每个(数组,函数(p1,p2){

这个;//在每次遍历中,它都指向数组的当前元素

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

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

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

复制代码如下:

$.每个(对象,函数(名称,值){

这个;//这指向当前属性的值

姓名;//name表示对象的当前属性的名称。

价值;//value表示对象的当前属性值。

});

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

复制代码如下:

$.每个(数组,函数(I,值){

这个;//这指向当前元素

我;//i表示数组的当前下标。

价值;//值表示数组的当前元素。

});

以下是jQuery每种方法的一些常见用法。

var arr=['一','二','三','四'];

$.each(arr,function(){

警戒(这个);

});

//上面每个输出的结果是:一,二,三,四。

var arr1=[[1,4,3],[4,6,6],[7,20,9]]

$.每个(arr1,函数(I,item){

警报(项目[0]);

});

//其实arr1是一个二维数组,item相当于取每一个一维数组,

//item[0]相对于取每个一维数组中的第一个值

//所以上面的每一个输出分别是:1 4 7

var obj={一:1,二:2,三:3,四:4 };

$.each(obj,function(key,val) {

alert(obj[key]);

});

//这个各更厉害。它可以循环每个属性。

//输出结果是:1 2 3 4

JQuery中的每个函数在1.3.2的官方文档中描述如下:

每个(回拨)

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

这意味着每次执行传递的函数时,函数中的This关键字都指向不同的DOM元素(每次都指向不同的匹配元素)。而且,每次执行一个函数时,代表作为执行环境的元素在匹配元素集中的位置的数值作为参数传递给该函数(从零开始的整形)。返回“false”将停止循环(就像在普通循环中使用“break”一样)。返回“真”跳转到下一个循环(就像在普通循环中使用“继续”一样)。

后面的回调是回调函数,表示遍历元素时应该给出的操作。先看下面这个简单的例子:

迭代两个图像并设置它们的src属性。注意:这里指的是DOM对象,不是jQuery对象。

HTML代码:

复制代码如下:

Img/img/jQuery代码:

$('img ')。每个(功能(i){

this.src='test' i '。jpg ';

});

结果:[img src=' test0.jpg'/,img src=' test1.jpg'/]

当然,jquery允许在遍历元素时自定义跳出。请看样例代码:可以使用' return '提前跳出each()循环。

HTML代码:

复制代码如下:

按钮更改颜色/按钮

span/span

分区/分区

分区/分区

分区/分区

分区/分区

div id='stop '在此停止/div

分区/分区

分区/分区

分区/分区

JQuery代码:

复制代码如下:

$('button ')。单击(函数(){

$('div ')。每个(函数(索引,domEle){

$(多美乐)。css('backgroundColor ',' wheat ');

如果($(这个)。是(' # stop '){

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

返回false

}

});

或者这样写:

复制代码如下:

$('button ')。单击(函数(){

$('div ')。每个(函数(索引){

$(这个)。css('backgroundColor ',' wheat ');

如果($(这个)。是(' # stop '){

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

返回false

}

});

插图:

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

提示:返回false可以用来提前停止循环。

语法

$(选择器)。每个(函数(索引,元素))参数描述

函数(索引,元素)是必需的。指定为每个匹配元素运行的函数。

索引-选择器的索引位置

元素-当前元素(您也可以使用“this”选择器

例子

输出每个li元素的文本:

复制代码如下:

$('button ')。单击(函数(){

$('李')。each(function(){

alert($(这个)。text())

});

});

例子

obj 对象不是数组

这种方法和1最大的区别是fn方法会连续进行,不考虑返回值。也就是说,obj对象的所有属性都会被fn方法调用,即使fn函数返回false。调用传递的参数类似于1。

复制代码如下:

jQuery.each=function( obj,fn,args ) {

if ( args ) {

if ( obj.length==undefined ){

for(对象中的变量I)

fn.apply( obj,args);

}否则{

for ( var i=0,ol=obj.length我ol;i ) {

if ( fn.apply( obj,args)==false)

打破;

}

}

}否则{

if ( obj.length==undefined ) {

for(对象中的变量I)

fn.call( obj,I,obj);

}否则{

for ( var i=0,ol=obj.length,val=obj[0];我ol fn.call(val,I,val)!==假;val=obj[ i] ){}

}

}

返回obj

}

需要注意的是,每个方法中fn的具体调用方法并没有采用简单的fn(i,val)或者fn(args),而是采用了fn.call(val,I,val)或者fn.apply(obj.args)的形式,也就是说在自己的fn实现中,可以直接使用这个指针来引用数组或者对象的子元素。

那怎么跳出each呢

当jquery再次遍历所选对象时,使用每一个都很方便。一种应用是在里面找到符合条件的对象后跳出这个循环。

Break通常用于跳出javascript的循环。

同事遇到这个问题,下意识的用了break,想跳出这个循环。结果错误报告

语法错误:未标记的break必须在循环或开关内

检查,你应该使用一个

就像大多数jq方法一样,在回调函数中返回false。

复制代码如下:

返回“false”将停止循环(就像在普通循环中使用“break”一样)。

返回“真”跳转到下一个循环(就像在普通循环中使用“继续”一样)。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: