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规范,以及一些其它副 ...
随机推荐
- 【带着canvas去流浪】 (3)绘制饼图
目录 一. 任务说明 二. 重点提示 三. 示例代码 四. hover高亮的实现思路 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:< ...
- C# 插入文本框到PPT幻灯片
概述 在文本框中我们可以实现的操作有很多,如插入文字.图片.设置字体大小.颜色.文本框背景填充.边框设置等.下面的示例中,将介绍通过C# 在PPT幻灯片中插入幻灯片的方法. 示例中包含了以下要点: 插 ...
- jsp内置对象-exception对象
1.概念:当JSP页面发生错误产生异常时,使用隐含对象exception针对该异常做出相应的处理.使用exception对象时,需要在page指令中设定:<%@page isErrorPage= ...
- 使用VC建立网络连接并访问网络资源
目录 1. 提出问题 2. 解决方案 1. 提出问题 在windows下可以通过系统操作,将局域网的资源映射到本地,从而实现像本地数据一样访问网络资源.实际上这些步骤也可通过代码调用win32函数实现 ...
- 一起学Android之ViewPager
本文以一个简单的小例子,简述在Android开发中ViewPager的常见用法,仅供学习分享使用. 概述 ViewPager是一个支持使用者左右滑动的布局管理控件,可以通过一个实现的(适配器)Page ...
- Jmeter输出完美报告
做技术的就爱折腾, 看到哪里不够完美,就想把它改改, 使其顺眼. 同样Jmeter输出的报告实在差强人意, 截图发给领导看不够美观, 缺少统计汇总, 有什么方法给对方一个地址就可以浏览报告? 答案是肯 ...
- 走进Java Map家族 (1) - HashMap实现原理分析
在Java世界里,有一个古老而神秘的家族——Map.从底层架构到上层应用,他们活跃于世界的每一个角落.但是,每次出现时,他们都戴着一张冷硬的面具(接口),深深隐藏着自己的内心.所有人都认识他们,却并非 ...
- linux 软链接的创建、删除和更新
大家都知道,有的时候,我们为了省下空间,都会使用链接的方式来进行引用操作.同样的,在系统级别也有.在Windows系列中,我们称其为快捷方式,在Linux中我们称其为链接(基本上都差不多了,其中可能有 ...
- 浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...