jq中each方法(jq的each方法)

http://www.itjxue.com  2023-01-30 07:54  来源:未知  点击次数: 

jquery each()方法的一点疑问。

each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等

在javaScript开发过程中使用$each可以大大的减轻的工作量。

each的几种常用的用法:

each处理一维数组

var arr1 = [ "aaa", "bbb", "ccc" ];

$.each(arr1, function(i,val){

alert(i);

alert(val);

});

alert(i)将输出0,1,2

alert(val)将输出aaa,bbb,ccc

each处理二维数组

var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]

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

alert(i);

alert(item);

});

arr2为一个二维数组,item相当于取这二维数组中的每一个数组。

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

alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素

alert(item)将输出为 ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']

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

语法:

$.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 foreach和each的区别

foreach 语句为数组或对象集合中的每个元素重复一个嵌入语句组。foreach 语句用于循环访问集合以获取所需信息,但不应用于更改集合内容,能够应用的编程语言类别:Java、C# 、PHP、D语言(Phobos库)。

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

在jQuery里的each方法,写回调函数的时候 为什么会传递过来两个参数?

JQuery的each的逻辑是这样的

对於一个类似Array的对象, 譬如普通的数组, arguments对象, 遍历下标从0至length - 1

对於其它对象, 遍历所有键值对

遍历时的操作是, 以call方法调用Callback, 形如Callback.call(值,键,值)

意思就是Callback里的this指向'值'(常见的诸如$('*').each(function(){this}))

传入的两个参数分别是键和值, 譬如 0, [object Object]

Jquery中的each用法

$("a").each(function(){

alert($(this).val());});这就是遍历页面上所有a标签的集合

(责任编辑:IT教学网)

更多

推荐淘宝营销文章