$.each循环

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34226413/article/details/70212511

对于循环我们首先会想到for循环,但是在前端对数组我们可以使用,但是对于json对象,想把对象中的属性的key-value循环去取出,那么for循环提供不了的。而each方法则给我们提供了便利,下面介绍对一维数组、二维数组、json对象以及页面元素进行便利。


Jquery提供$.each方法对变量进行循环

1、一维数组:

//一维数组
var arr=["aa","bb","cc","dd"];
//arr代表
$.each(arr,function(i,val){
    console.log(i);
    console.log(val);
});
//输出结果: 0 aa    1 bb    2 cc    3 dd

2、二维数组:

//二维数组
var arr1=[[1,2],[3,4],[5,6]];
$.each(arr1,function(i,val){
    console.log(i);
    console.log(val);
});
//输出结果 :0  [12]    1 [3,4]   2 [5,6]


//对上二维数组循环做下修改,二维数组的元素再次使用each方法

var arr1=[[1,2],[3,4],[5,6]];
$.each(arr1,function(i,array){
    $.each(array,function(j,val){
        console.log(i);
        console.log(j);
        console.log(val);
    });
});
//输出结果:第一次循环 0 0 1  第二次循环 0 1 2 第三次循环 1 0 3 
//第四次循环  1 1 4  第五次循环 2 0 5 第六次循环 2 1 6

3、Json对象:

//处理json对象
var jsonObject={
    "name":"王二",
    "sex":"男",
    "age":"12"
};
$.each(jsonObject, function(key,val) {
    console.log(key);
    console.log(val);
});

//输出结果:  name 王二    sex 男   age 12

4、ecah处理dom元素,此处以一个input表单元素作为例子。

<input name="name1" type="text" value="123"/>
<input name="name2" type="text" value="456" />
<input name="name3" type="text" value="789" />

$.each($("input:text"), function(i,val) {
    console.log(i)    
    console.log(val);
    console.log(val.name);
    console.log(val.value);
});

//输出结果 
//0 [object HTMLInputElement] name1 123
//1 [object HTMLInputElement] name2 456 
//2 [object HTMLInputElement] name3 789

//注意 :[object HTMLInputElement] 是因为input表单元素,在google浏览器会打印出<input name="name1" type="text" value="123">
展开阅读全文

没有更多推荐了,返回首页