jq中each方法(jq的each方法)
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
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标签的集合