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);
});
jQuery中$.each()方法(遍历)的更多相关文章
- js,jquery中.each()方法遍历如何终止循环
用.each()方法遍历节点的时候,用“return false”只能终止当前循环并跳入下一次循环,并不能终止所有循环.代码如下: $(".days").each(function ...
- jquery中.each()方法遍历循环如何终止方法
使用return false 终止循环 function checkStar(obj){ var flag=false; //获取本节点星级 var star = obj.getAttribute(& ...
- jQuery通用的全局遍历方法$.each()用法实例
1.jQuery通用的全局遍历方法$.each()用法 2. test.json文件代码: 3. html代码 4.jQuery代码 <script src="jquery-1.3.1 ...
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- jquery 常用基础方法
1 jquery常用方法: 2 取得标签元素里面内容与修改: 3 1.text()方法: 4 $(document).ready(function(){ 5 //alert("文档加载完毕& ...
- jQuery基础之(二)jQuery中的$
在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuer ...
- Jquery源码中的Javascript基础知识(四)— jQuery.fn.init方法
$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selecto ...
- html5的自定义data-*属性和jquery的data()方法的使用示例
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...
- html5的自定义data-*属性与jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- html5的自定义data-*属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
随机推荐
- 使用.NetCore 控制台演示 熔断 降级(polly)
1.熔断降级的概念: 熔断:我这里有一根长度一米的钢铁,钢铁的熔点1000度(假设),现在我想用力把这根钢铁折弯,但是人的力有限达不到折弯的点,然后我使用火给钢铁加热,每隔一段时间我就会尝试一下是否能 ...
- Web项目也能一键打包Android、IOS
随着移动互联网的不断发展,智能手机配置的不断提高,越来越多的年轻人基本都在使用手机,如微信.支付宝等等.已基本成为一种习惯,坐电梯也好.吃饭也好.开车也好,基本都捧着一个手机在那按来按去,开车就不建议 ...
- webservice创建、部署和调用
webservice 可以用于分布式应用程序之间的交互,和不同程序之间的交互. 下面通过一个简单的例子来创建一个webservice,用的是vs2010开发工具 首先创建一个web应用程序 接着我们添 ...
- java--基本数据类型的转换(自动转换)
概念:Java中,经常可以遇到类型转换的场景,从变量的定义到复制.数值变量的计算到方法的参数传递.基类与派生类间的造型等,随处可见类型转换的身影.Java中的类型转换在Java编码中具有重要的作用.首 ...
- Error fetching https://gems.ruby-china.org/: bad response Not Found 404 (https://gems.ruby-china.org/specs.4.8.gz) 报错解决办法
执行换源操作 gem source -a https://gems.ruby-china.org/ 时报错: Error fetching https://gems.ruby-china.org/: ...
- Swiper4.x使用方法
1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件.可下载Swiper文件或使用CDN. <!DOCTYPE html> <html> ...
- FreeNas搭建踩坑指南(一)
0x00 背景 最近公司的旧群晖服务器Raid6,因为同时坏了两块硬盘存储池损毁,所以领导决定买了Dell R730自己搭NAS,选来选去最后选了FreeNAS,这里记录一些踩过的坑. 0x01 问题 ...
- Vue与React两个框架的区别对比
简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...
- 太嚣张了!他竟用Python绕过了“验证码”
在web页面中,经常会遇到验证码,这对于我这么一个热爱web自动化测试人员,就变成了一件头疼的事.于是千方百计找各种资源得到破解简单的验证码方法. 识别验证码 大致分如下几个步骤: 1.获取验证码图片 ...
- Web Storage:浏览器端数据储存机制
目录 概述 操作方法 存入/读取数据 清除数据 遍历操作 storage事件 参考链接 概述 这个API的作用是,使得网页可以在浏览器端储存数据.它分成两类:sessionStorage和localS ...