$.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. Spring Cloud Alibaba基础教程:Sentinel使用Apollo存储规则

    上一篇我们介绍了如何通过Nacos的配置功能来存储限流规则.Apollo是国内用户非常多的配置中心,所以,今天我们继续说说Spring Cloud Alibaba Sentinel中如何将流控规则存储 ...

  2. Java 项目中一种简单的动态修改配置即时生效的方式 WatchService

    这种方式仅适合于比较小的项目,例如只有一两台服务器,而且配置文件是可以直接修改的.例如 Spring mvc 以 war 包的形式部署,可以直接修改resources 中的配置文件.如果是 Sprin ...

  3. 一个tomcat设置多个端口,多个端口对应多个应用

    修改tomcat/conf目录里面server.xml文件 例如下面这样新增一个8090端口,设置下appBase目录,这样就可以用一个tomcat监听多个端口,每个端口都可以放应用了.我这样新增下面 ...

  4. oracle学习笔记(二) 基本数据类型

    常用的数据类型 int number number(4,1) 999.1 四个数字,小数位一位 decimal date 日期 格式如下: 注意:日期类型的字段格式,可以通过以下三种方式: 1. da ...

  5. day07 Class_field_method_反射

    Class 由于Class类没有公共构造方法,所有创建Class的对象的方法有以下几种:   1).通过Class.forName()静态方法返回Class类的一个实例 Class cls=Class ...

  6. 报表平台对CRM系统价值几何

    CRM系统即客户关系管理系统,其利用信息科学技术实现市场营销.销售.服务等活动自动化,使企业能高效地为客户提供周到的服务,以提升客户满意度与忠诚度为目的的一种管理经营方式.而CRM报表平台作为一个枢纽 ...

  7. 源码浅谈(二):java中的 Integer.parseInt(String str)方法

    这个方法是将字符串转换为整型 一.parseInt方法 ,可以看到默认又调用了parseInt(s,10) ,  第二个参数为基数,默认10 ,当然也可以自己设置  public static int ...

  8. JMeter 接口测试-if控制器

    JMeter 接口测试-if控制器 ​ 使用场景: 当业务场景是用户登录才能支付操作, 不登录点击支付, 页面会跳转到登录页面. 对于接口也是这样, 一个接口需要执行前, 需要有前提条件, 比如0状态 ...

  9. go的生产者-消费者模式

    package main import ( "fmt" "math/rand" "time" ) // 数据生产者 func produce ...

  10. js实现语音功能

    在项目中需要对ajax请求返回的消息进行语音播报.那么什么录制的就是在太low啦.下面js贴代码 str 为返回的data //语音播报function voiceAnnouncements(str) ...