jQuery中$.each使用详解
使用说明
each函数根据参数的类型实现的效果不完全一致:
1、遍历对象(有附加参数)
$.each(Object, function (p1, p2) {
this; //这里的this指向每次遍历中Object的当前属性值
p1; p2; //访问附加参数
}, ['参数1', '参数2']);
2、遍历数组(有附件参数)
$.each(Array, function (p1, p2) {
this; //这里的this指向每次遍历中Array的当前元素
p1; p2; //访问附加参数
}, ['参数1', '参数2']);
3、遍历对象(没有附加参数)
$.each(Object, function (name, value) {
name; //name表示Object当前属性的名称
value; //value表示Object当前属性的值
this; //this指向当前属性的值
});
·举例
var obj = {
one : 1,
two : 2,
three : 3,
four : 4
};
$.each(obj, function (key, val) {
alert("key="+key+" val="+val+" obj[key]="+obj[key]);
alert(this)
});
//输出 key为one two three four
//输出 val为1 2 3 4
//输出 this为1 2 3 4
4、遍历数组(没有附加参数)
$.each(Array, function (i, value) {
this; // this指向当前元素
i; // i表示Array当前下标
value; // value表示Array当前元素
});
·举例
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
5、循环遍历DOM对象
$.each($("input:hidden"), function (i, val) {
alert(val); // 为DOM对象
alert(i); // 为下标0 1 2
alert(val.name);
alert(val.value);
});
·举例
<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>
$("input:hidden").each(function (i, val) {
alert(i);
alert(val);
alert(val.name); // 等价于 $(this).attr("name")
alert(val.value); // 等价于 $(this).val();
});
</script>
//输出 1 [object HTMLInputElement] aaa 111
其他
如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,
例如:
$("input[name='ch']").each(function (i) {
if ($(this).attr('checked') == true) {
//一些操作代码
}
// 回调函数是可以传递参数,i就为遍历的索引。
对于遍历一个数组
例如:
$.each([{"name":"limeng","email":"xfjylimeng"},{"name":"hehe","email":"xfjylimeng"}],function(i,n)
{
alert("索引:"+i+"对应值为:"+n.name);
// alert("索引:"+i+"对应值为:"+$(this).attr("name"));})
});
//索引:0 对应值为:limeng
//参数i为遍历索引值,n为当前的遍历对象.