博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery使用$.each()
阅读量:4329 次
发布时间:2019-06-06

本文共 1929 字,大约阅读时间需要 6 分钟。

$.each()是对数组,json和dom结构等的遍历,说一下他的使用方法吧。

1、遍历一维数组

var arr1=['aa','bb','cc','dd']; $.each(arr1,function(i,val){ //两个参数,第一个参数表示遍历的数组的下标,第二个参数表示下标对应的值 console.log(i+'```````'+val);

输出的结果为:

0```````aa 1```````bb  2```````cc 3```````dd

2、遍历二维数组

var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];$.each(arr2,function(i,item){ //两个参数,第一个参数表示下标,第二个参数表示一维数组中的每一个数组 console.log(i+'````'+item);

输出的结果为:

0````aaa,bbb 1````ccc,ddd 2````eee,fff

此时可以对输出的一维数组进行遍历

$.each(item,function(i,val){  //遍历二维数组          console.log(i+'`````'+val);  })

输出的结果为:

0````aaa,bbb     0`````aaa     1`````bbb 1````ccc,ddd     0`````ccc     1`````ddd 2````eee,fff     0`````eee     1`````fff

3、处理json

var json1={key1:'a',key2:'b',key3:'c'}; $.each(json1,function(key,value){  //遍历键值对            console.log(key+'````'+value);  })

输出的结果为:

key1````a key2````b key3````c

4、当二位数组中有json对象时

var arr3=[{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:22}];        $.each(arr3,function(i,val){            console.log(i+'`````'+val);       //输出     /* 0`````[object Object] 1`````[object Object] i2`````[object Object]*/            console.log(val.name); //获取每一个json里面的name值            console.log(val["name"]);            $.each(val,function(key,val2){                console.log(key+'```'+val2);            })        });

5、处理dom元素

$.each($('input:hidden'),function(i,val){            console.log(i+'````'+val);            /*0````[object HTMLInputElement]            1````[object HTMLInputElement]            2````[object HTMLInputElement]            3````[object HTMLInputElement]*/            console.log(val.name+'`````'+val.value);           /* aaa`````111           bbb`````222            ccc`````333           ddd`````444*/        })

以上就是$.each()最基本的使用了,

jQuery中还有另外一种写法来遍历元素

$("input:hidden").each(function(i,val){  //第一个参数表示索引下标,第二个参数表示当前索引元素    alert(i);    alert(val.name);    alert(val.value);       });

转载于:https://www.cnblogs.com/gerry/p/10435202.html

你可能感兴趣的文章
实验二
查看>>
shell——按指定列排序
查看>>
crash 收集
查看>>
507 LOJ 「LibreOJ NOI Round #1」接竹竿
查看>>
UI基础--烟花动画
查看>>
2018. 2.4 Java中集合嵌套集合的练习
查看>>
精通ASP.NET Web程序测试
查看>>
vue 根据不同属性 设置背景
查看>>
51Nod1601 完全图的最小生成树计数 Trie Prufer编码
查看>>
Codeforces 1110D. Jongmah 动态规划
查看>>
android驱动在win10系统上安装的心酸历程
查看>>
优雅的程序员
查看>>
oracle之三 自动任务调度
查看>>
Android dex分包方案
查看>>
ThreadLocal为什么要用WeakReference
查看>>
删除本地文件
查看>>
FOC实现概述
查看>>
base64编码的图片字节流存入html页面中的显示
查看>>
这个大学时代的博客不在维护了,请移步到我的新博客
查看>>
GUI学习之二十一——QSlider、QScroll、QDial学习总结
查看>>