$.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. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  2. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

  3. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  4. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  5. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

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

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

  7. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  8. [转]jQuery的each方法的几种常用的用法

    下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下:  var arr = [ "one", "two", "three&quo ...

  9. jquery中$.ajax方法提交表单

    function postdata(){                        //提交数据函数 $.ajax({                                //调用jqu ...

  10. JS,JQuery的扩展方法

    转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            ...

随机推荐

  1. June 29th. 2018, Week 26th. Friday

    Real love is always worth waiting for. 真爱永远值得等待. From Westworld. Real love is rare, but it does exis ...

  2. zabbix安装及简单使用备注

    1.安装mysql yum install -y mariadb mariadb-server systemctl start mariadb 2.安装apache yum -y install ht ...

  3. webgl自学笔记——深度监测与混合

    这一章中关于webgl中颜色的使用我们将深入研究.我们将从研究颜色在webgl和essl中如何被组装和获取开始.然后我们讨论在物体.光照和场景中颜色的使用.这之后我们将看到当一个物体在另一个物体前面是 ...

  4. Jvm启动,关闭及对应钩子

    很多时候应用服务启动或关闭会做一些预加载(比如缓存,定时任务启动等)或收尾处理工作(比如程序失败记录等) 1. 首先看下Spring框架服务启动加载操作实现,直接上代码 继承实现接口Applicati ...

  5. 使用BeanUtils类实现DTO之间的同名属性复制

    开发中经常碰到这样的场景,从数据库查询出来全部的字段,但是有些字段是不想给 客户端看到,这时就需要将属性从DAO复制到传给客户端的DTO对象,如果采用get/set, 那显得很麻烦.可使用反射实现. ...

  6. SUSE12SP3-Mycat(1)安装

    目录 前言 环境 安装说明 安装 1.mycat 2.mycat-eye 前言 介绍自己看. mycat官网:http://www.mycat.io/ 环境 系统: SUSE12SP3 软件 版本 说 ...

  7. .NET Core微服务之基于Consul实现服务治理

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.Consul基础介绍 Consul是HashiCorp公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其他分布式服务注册与发 ...

  8. 深度解密HTTP通信细节

    目录 HTTP报文截获 背景介绍 抓包 mac本地 远程docker 请求 && 分析 关闭服务进程 关闭docker 重启docker 正常请求 HTTP协议分析 整体介绍 编码 M ...

  9. 🕵️ 如何绕过 BKY 对 script 的屏蔽

    Conmajia January 20, 2019 警告 这是试验,警告个屁,请不要多多尝试用它做多余的事. 果不其然,这篇文章立刻被移出主页了,我就说嘛,BKY 哪儿会那么包容和坦然呢? 原文 do ...

  10. C#的Lock

    有时候在编写线程并发的时候需要考虑异步和同步的问题.有些资源只能是一个线程访问,其他的线程在这个线程没有释放资源前不能访问.类似于操作系统中临界资源的访问.C#Lock包裹的代码块具有原子操作的特性( ...