快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

jquery数组each,jquery数组遍历

jQuery中$.each()函数的用法引申实例

语法:

创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、成都网站制作、丰泽网络推广、微信小程序开发、丰泽网络营销、丰泽企业策划、丰泽品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供丰泽建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com

$.each(

collection,

callback(indexInArray,

valueOfElement)

)

值得一提的是,forEach

可以很方便的遍历数组和

NodeList

,jQuery

中的

jQuery

对象本身已经部署了这类遍历方法,而在原生

JavaScript

中则可以使用

forEach

方法,但是

IE

并不支持,因此我们可以手动把

forEach

方法部署到数组和

NodeList

中:

if

(

!Array.prototype.forEach

){

Array.prototype.forEach

=

function(fn,

scope)

{

for(

var

i

=

0,

len

=

this.length;

i

len;

++i)

{

fn.call(scope,

this[i],

i,

this);

}

}

}

//

部署完毕后

IE

也可以使用

forEach

document.getElementsByTagName('p').forEach(function(e){

e.className

=

'inner';

});

而jQuery中的$.each()函数则更加强大。$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。

其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。

例1:传入数组

!DOCTYPE

html

html

head

script

src=””/script

/head

body

script

$.each([52,

97],

function(index,

value)

{

alert(index

+

‘:

+

value);

});

/script

/body

/html

输出:

0:

52

1:

97

例2:如果一个映射作为集合使用,回调函数每次传入一个键-值对

!DOCTYPE

html

html

head

script

src=””/script

/head

body

script

var

map

=

{

‘flammable':

‘inflammable',

‘duh':

‘no

duh'

};

$.each(map,

function(key,

value)

{

alert(key

+

‘:

+

value);

});

/script

/body

/html

输出:

flammable:

inflammable

duh:

no

duh

例3:回调函数中

return

false时可以退出$.each(),

如果返回一个非false

即会像在for循环中使用continue

一样,

会立即进入下一个遍历

!DOCTYPE

html

html

head

style

div

{

color:blue;

}

div#five

{

color:red;

}

/style

script

src=””/script

/head

body

div

id=”one”/div

div

id=”two”/div

div

id=”three”/div

div

id=”four”/div

div

id=”five”/div

script

var

arr

=

[

"one",

"two",

"three",

"four",

"five"

];//数组

var

obj

=

{

one:1,

two:2,

three:3,

four:4,

five:5

};

//

对象

jQuery.each(arr,

function()

{

//

this

指定值

$(“#”

+

this).text(“Mine

is

+

this

+

“.”);

//

this指向为数组的值,

如one,

two

return

(this

!=

“three”);

//

如果this

=

three

则退出遍历

});

jQuery.each(obj,

function(i,

val)

{

//

i

指向键,

val指定值

$(“#”

+

i).append(document.createTextNode(”

+

val));

});

/script

/body

/html

输出

Mine

is

one.

1

Mine

is

two.

2

Mine

is

three.

3

-

4

-

5

jquery each 里面可以在有each吗

在jquery中的each有两种用法,分别是$.each()和$(selector).each(); $.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值

jquery里面的each()是什么意思

each()就是循环,给你例子吧,比如你的页面只有 3对p标签p1/pp2/pp3/p$("p").each(function(i){//这样写它就是循环三次,其中function中的i就是指索引alert(i);//弹出循环到当前p的索引,索引从0开始,你可以试试,执行程序看效果就是最好的理解alert($(this).text());//弹出循环到当前p的文本});

jquery each()源代码

复制代码

代码如下:

//

args

is

for

internal

usage

only

each:

function(

object,

callback,

args

)

{

var

name,

i

=

0,

length

=

object.length,

isObj

=

length

===

undefined

||

jQuery.isFunction(object);

if

(

args

)

{

if

(

isObj

)

{

for

(

name

in

object

)

{

if

(

callback.apply(

object[

name

],

args

)

===

false

)

{

break;

}

}

}

else

{

for

(

;

i

length;

)

{

if

(

callback.apply(

object[

i++

],

args

)

===

false

)

{

break;

}

}

}

//

A

special,

fast,

case

for

the

most

common

use

of

each

}

else

{

if

(

isObj

)

{

for

(

name

in

object

)

{

if

(

callback.call(

object[

name

],

name,

object[

name

]

)

===

false

)

{

break;

}

}

}

else

{

for

(

var

value

=

object[0];

i

length

callback.call(

value,

i,

value

)

!==

false;

value

=

object[++i]

)

{}

}

}

return

object;

},

分析:jquery文档说

each(callback)作用是以每一个匹配的元素作为上下文来执行一个函数。就是用each来遍历数组,来执行同一个方法

这个方法的实现最关键的是:call与apply的用法:call(apply)就是将函数的对象的从初始的上下文改为thisObj指向的对象,

就是说用thisObj来代替原来的对象来执行方法:call与apply的第一个参数为this指向的对象,而后面的参数都下传给函数的,

call传给函数的参数用逗号分隔而apply则为一个数组。

//1.callback.apply(

object[

name

],

args

)

//2.callback.call(

object[

name

],

name,

object[

name

]

)

jquery中.map与each的区别?

一、功能不同

1、map:用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。

2、each:为每个匹配元素规定要运行的函数。

二、传递参数不同

1、map:会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。

2、each: 会为函数传入两个参数:其一是选择器的 index 位置。其二是当前的元素。

三、返回值不同

1、map:返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。

2、each:返回 false 可用于及早停止循环。

参考资料来源:百度百科-each

参考资料来源:百度百科-Map

JQuery中$each 和$each的区别详解

在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。

$().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:

$(“input[name=’ch’]”).each(function(i){

if($(this).attr(‘checked’)==true)

{

//一些操作代码

}

回调函数是可以传递参数,i就为遍历的索引。

对于遍历一个数组,用$.each()来处理,简直爽到了极点。例如:

$.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n)

{

alert(“索引:”+i,”对应值为:”+n.name);

});

参数i为遍历索引值,n为当前的遍历对象.

var arr1 = [ “one”, “two”, “three”, “four”, “five” ];

$.each(arr1, function(){

alert(this);

});

输出:one two three four five

var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

$.each(arr2, function(i, item){

alert(item[0]);

});

输出:1 4 7

var obj = { one:1, two:2, three:3, four:4, five:5 };

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

alert(obj[key]);

});

输出:1 2 3 4 5

在jQuery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法。

其实jQuery里的each方法是通过js里的call方法来实现的。

下面简单介绍一下call方法。

call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

参数

thisObj

可选项。将被用作当前对象的对象。

arg1, arg2, , argN

可选项。将被传递方法参数序列。

说明

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

引用网上有一个很经典的例子

Js代码

function add(a,b)

{

alert(a+b);

}

function sub(a,b)

{

alert(a-b);

}

add.call(sub,3,1);

用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);

注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。

具体call更深入的就不在这里提了。

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

Js代码

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,jquery数组遍历
本文地址:http://6mz.cn/article/phieji.html

其他资讯