$.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()方法(遍历)的更多相关文章

  1. js,jquery中.each()方法遍历如何终止循环

    用.each()方法遍历节点的时候,用“return false”只能终止当前循环并跳入下一次循环,并不能终止所有循环.代码如下: $(".days").each(function ...

  2. jquery中.each()方法遍历循环如何终止方法

    使用return false 终止循环 function checkStar(obj){ var flag=false; //获取本节点星级 var star = obj.getAttribute(& ...

  3. jQuery通用的全局遍历方法$.each()用法实例

    1.jQuery通用的全局遍历方法$.each()用法 2. test.json文件代码: 3. html代码 4.jQuery代码 <script src="jquery-1.3.1 ...

  4. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  5. jquery 常用基础方法

    1 jquery常用方法: 2 取得标签元素里面内容与修改: 3 1.text()方法: 4 $(document).ready(function(){ 5 //alert("文档加载完毕& ...

  6. jQuery基础之(二)jQuery中的$

    在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuer ...

  7. Jquery源码中的Javascript基础知识(四)— jQuery.fn.init方法

    $() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) { return new jQuery.fn.init( selecto ...

  8. html5的自定义data-*属性和jquery的data()方法的使用示例

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...

  9. html5的自定义data-*属性与jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  10. html5的自定义data-*属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

随机推荐

  1. DSAPI WIN7风格

    在Winform项目中,有时需要将UI变成适应Vista/Windows7/8/10的风格,通过"选用"以下代码来使你的UI支持系统主题渲染. 注:该功能不支持XP,建议使用DS控 ...

  2. 物联网RFID技术之应用ETC系统

    背景 信息物理系统CPS通过集成先进的感知.计算.通 信.控制等信息技术和自动控制技术,构建了物理空间与信息空间中人. 机.物.环境.信息等要素相互映射.适时交互.高效协同的复杂系统, 实现系统内资源 ...

  3. Deepin Linux系统的日常使用总结(日常施工)

    1.登录root权限用户 sudo su 2.安装软件语句 apt-get install <package_name> 相对的, 安装:apt-get install <packa ...

  4. asp.net core 今日所得

    ViewBag中文变量被编码.乱码. 解决方法: @Html.Raw(@ViewBag.XX) 在 Startup.cs 的 ConfigureServices() 方法中添加下面的一行代码: ser ...

  5. 弹性布局 - flex对齐

    flex对齐 flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的. 主轴 justify-content   justify-content对齐方式共有5种对齐方 ...

  6. 从PM到非洲酋长,得人心者得天下

    说正事之前,先唠10块钱儿的…… 偶然看到房一波的故事,这个PM了不得了! 房兄是山东电建三公司,派驻到尼日利亚建设燃机电站的PM.本来在非洲,这种“万丈高楼平地起”的项目是很好干的,可是房兄却遭遇了 ...

  7. Java中字符串相加和字符串常量相加区别

    有一道这样的程序: public class TestStringDemo { public static void main(String[] args) { String s1 = "P ...

  8. spring笔记----看书笔记

    上周末看了一章以前javaee轻量级的书spring部分,简单做了一些笔记 // ApplicationContext ac=new ClassPathXmlApplicationContext(&q ...

  9. 使用Server Trigger保护重要的数据库对象

    一 .Server Trigger的简单介绍 在SQL Server数据库中,Server Trigger 是一种特殊类型的存储过程,它可以对特定表.视图或存储中的必然事件自动响应,不由用户调用.创建 ...

  10. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...