【转】jQuery中$.each()方法的使用
$.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元素
<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"/>
$.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/liyuspace/p/9549774.html
- 推荐文章
- KMP算法计算next值和nextVal值
- linux 常用命令
- Linux 修改/etc/sudoers 可被任何修改,如何解决
- 博客园添加粒子特效
- 计算机网络知识体系总结
- 计算机网络---应用层
- win10安装并激活office
- Python高手之路【十】python基础之反射
- Python高手之路【七】python基础之模块
- Python高手之路【九】python基础之迭代器与生成器
- Python高手之路【八】python基础之requests模块
- Python高手之路【六】python基础之字符串格式化
- Python高手之路【五】python基础之正则表达式
- Python高手之路【四】python函数装饰器,迭代器
- Python高手之路【三】python基础之函数
- Python高手之路【二】python基本数据类型
- redis的sentinel主从切换(failover)与Jedis线程池自动重连
- 记录一次因为硬盘写满造成的redis无法连接
- Hadoop通过HCatalog编写Mapreduce任务访问hive库中schema数据
- elasticsearch的映射(mapping)和分析(analysis)
- java优雅的使用elasticsearch api
- springboot mybatis优雅的添加多数据源
- java通过shield链接Elasticsearch
- java spark-streaming接收TCP/Kafka数据
- hiveQL求差集
- hiveQL去重
- Ubuntu16.04+Opencv3.3的安装教程
- TensorFlow池化层-函数
- TensorFlow激活函数+归一化-函数
- TensorFlow图像预处理-函数