jQuery.each()
函数用于遍历指定的对象和数组,并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。
所谓的上下文,意即该函数内部的this
指针引用了该元素。
该函数属于全局jQuery
对象。请注意,这与jQuery对象(实例)的each()函数不同。
语法
静态函数jQuery.each()
的语法如下:
JavaScript:
jQuery.each( object, callback )
参数
参数 | 描述 |
object | Object类型指定需要遍历的对象或数组。 |
callback | Function类型指定的用于循环执行的函数。 |
参数object
可以是对象或数组。如果是对象,则遍历该对象的每个属性;如果是数组,则遍历该数组中的每个元素。
jQuery.each()
函数将根据每个成员(对象的属性或数组的元素)循环调用函数callback
。每次调用函数callback
时,jQuery.each()
函数都会将callback
函数内部的this
引用指向当前正在迭代的成员,并为其传入两个参数。第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数),第二个参数是当前迭代成员(与this
的引用相同)。
jQuery.each()的使用:
$.each()是对数组,json和dom结构等的遍历,说一下他的使用方法吧。
1、遍历一维数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq之each方法</title>
<script src="jquery-2.0.3.js"></script>
</head>
<body>
<script>
//遍历一维数组
var arr1 = ['aa','bb','cc','dd'];
$.each(arr1,function(i,value){
//两个参数,第一个参数表示遍历的数组的下标,第二个参数表示下标对应的值
console.log(i+'...'+value);
});
</script>
</body>
</html>
结果:
2、遍历二维数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq之each方法</title>
<script src="jquery-2.0.3.js"></script>
</head>
<body>
<script>
//遍历二维数组
var arr2 = [['aa','bb'],['cc','dd'],['ee','ff']];
$.each(arr2,function(i,item){
//两个参数,第一个参数表示下标,第二个参数表示一维数组中的每一个数组
console.log(i+'...'+ item);
});
</script>
</body>
</html>
结果:
在此基础上还可以对遍历出来的一维数组进行遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq之each方法</title>
<script src="jquery-2.0.3.js"></script>
</head>
<body>
<script>
//遍历二维数组
var arr2 = [['aa','bb'],['cc','dd'],['ee','ff']];
$.each(arr2,function(i,item){
console.log(i+'...'+ item);
$.each(item,function(i,value){
console.log(i+'...'+value);
})
});
</script>
</body>
</html>
结果:
3、处理json
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq之each方法</title>
<script src="jquery-2.0.3.js"></script>
</head>
<body>
<script>
//处理json
var json1 ={key1:'a',key2:'b',key3:'c'};
$.each(json1,function(key, value){
console.log(key+'...'+value);
});
</script>
</body>
</html>
结果:
4、当数组中有json对象时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq之each方法</title>
<script src="jquery-2.0.3.js"></script>
</head>
<body>
<script>
//当数组中是json对象时
var arr3 = [{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:35}];
$.each(arr3,function(i,value){ //遍历得到数组中的每个json对象
console.log(i+'...'+value);
console.log(value.name);//获取每一个json里面的name值
console.log(value['name']);//获取每一个json里面的name值
$.each(value,function(key,val){ //遍历得到每个json对象中的每个值
console.log(key+'...' +val);
});
});
</script>
</body>
</html>
结果:
5、处理dom元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq之each方法</title>
<script src="jquery-2.0.3.js"></script>
</head>
<body>
<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>
<script>
//处理dom元素
$.each($('input:hidden'),function(i,val){
console.log(i+'...'+val);
console.log(val.name+'...'+val.value);
});
</script>
</body>
</html>
结果:
所有用法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq之each方法</title>
<script src="jquery-2.0.3.js"></script>
</head>
<body>
<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>
<script>
//遍历一维数组
var arr1 = ['aa','bb','cc','dd'];
$.each(arr1,function(i,value){
//两个参数,第一个参数表示遍历的数组的下标,第二个参数表示下标对应的值
console.log(i+'...'+value);
});
//遍历二维数组
var arr2 = [['aa','bb'],['cc','dd'],['ee','ff']];
$.each(arr2,function(i,item){
console.log(i+'...'+ item);
$.each(item,function(i,value){
console.log(i+'...'+value);
})
});
//处理json
var json1 ={key1:'a',key2:'b',key3:'c'};
$.each(json1,function(key, value){
console.log(key+'...'+value);
});
//当数组中是json对象时
var arr3 = [{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:35}];
$.each(arr3,function(i,value){ //遍历得到数组中的每个json对象
console.log(i+'...'+value);
console.log(value.name);//获取每一个json里面的name值
console.log(value['name']);//获取每一个json里面的name值
$.each(value,function(key,val){ //遍历得到每个json对象中的每个值
console.log(key+'...' +val);
});
});
//处理dom元素
$.each($('input:hidden'),function(i,val){
console.log(i+'...'+val);
console.log(val.name+'...'+val.value);
});
</script>
</body>
</html>