在jquery 中我们可以选择$().each() 与 $.each() 进行迭代对象和数组

$(items).each(function(){

     //item

})   ,

而后者则

  $.each(items,function(i,item){

//write your code

})
each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等
在javaScript开发过程中使用$each可以大大的减轻我们的工作量。
下面提一下each的几种常用的用法  
each处理一维数组
  var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});

alert(i)将输出0,1,2
alert(val)将输出aaa,bbb,ccc

each处理json数据,这个each就有更厉害了,能循环每一个属性

   var obj = { one:, two:, three:};
  each(obj, function(key, val) {
  alert(key);
  alert(val);
  });
这里alert(key)将输出one two three
alert(val)将输出one,1,two,2,three,3
这边为何key不是数字而是属性呢,因为json格式内是一组无序的属性-值,既然无序,又何来数字呢。
而这个val等同于obj[key]
 

ecah处理dom元素,此处以一个input表单元素作为例子。

如果你dom中有一段这样的代码
<input name="aaa" type="hidden" value="" />
<input name="bbb" type="hidden" value="" />
<input name="ccc" type="hidden" value="" />
<input name="ddd" type="hidden" value=""/>

然后你使用each如下

 $.each($("input:hidden"), function(i,val){
alert(val);
alert(i);
alert(val.name);
alert(val.value);
});
那么,alert(val)将输出[object HTMLInputElement],因为它是一个表单元素。   

alert(i)将输出为0,1,2,3

alert(val.name);将输出aaa,bbb,ccc,ddd,如果使用this.name将输出同样的结果
alert(val.value);  将输出111,222,333,444,如果使用this.value将输出同样的结果

如果将以上面一段代码改变成如下的形式

$("input:hidden").each(function(i,val){
alert(i);
alert(val.name);
alert(val.value);
});

可以看到,输出的结果是一样的,至于两种写法究竟区别在哪,我也还不知。此改变运用到上面几段数组的操作也会输出同样的结果。

JS 循环遍历JSON数据
JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"valu
e/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/"}]"}

用js可以写成:
var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}];
for(var o in data){
alert(o);
alert(data[o]);
alert("text:"+data[o].name+" value:"+data[o].age );
}

也可写成
<script type="text/javascript">
function text(){
var json = {"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"value/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/"}]"}
json = eval(json.options)
for(var i=0; i<json.length; i++)
{
alert(json[i].text+" " + json[i].value)
}
}
</script>

随机推荐

  1. nginx根据IP限制访问

    nginx有两个模块可以控制访问 HttpLimitZoneModule    限制同时并发访问的数量 HttpLimitReqModule     限制访问数据,每秒内最多几个请求 http{ ## ...

  2. 虚拟机Linux----Ubuntu1204----设置固定Ip

    1.介绍 环境:ubuntu版本是12.04,虚拟机是Oracle Vm VirtualBox 2.说明 需求:现在已经安装了一个ubuntu系统,网络配置是默认选择桥接,可以上网,物理机可以连接虚拟 ...

  3. C#连接MySql数据库的方法

    1.要连接MySql数据库必须首先下载MySql的连接.net的文件, 文件下载地址为http://download.csdn.net/detail/xiaoliu123586/91455792.解压 ...

  4. linux timezone

    首先需要了解下“UTC时间”与“本地时间”UTC时间:世界协调时间(又称世界标准时间.世界统一时间),在一般精度要求下,它与GMT(Greenwich Mean Time,格林威治标准时间)是一样的, ...

  5. hihocoder 1388 &&2016 ACM/ICPC Asia Regional Beijing Online Periodic Signal

    #1388 : Periodic Signal 时间限制:5000ms 单点时限:5000ms 内存限制:256MB 描述 Profess X is an expert in signal proce ...

  6. 读《深入理解Java虚拟机》有感——第一部分:Class文件的结构

    1.产生 源码(.java文件)——>编译器(如:javac)——>字节码(.class文件)——>虚拟机(如:HotSpot)执行 2.Class文件  1)构成:         ...

  7. UVA 11235 Frequent Values ---RMQ

    大白书上的例题,具体讲解见大白书,最好用用一个Log数组直接求k,这样就是纯O(1)了 #include <iostream> #include <cstdio> #inclu ...

  8. [Editor]Unity Editor类常用方法

    Editor文档资料 Unity教程之-Unity Attribute的使用总结:http://www.unity.5helpyou.com/3550.html 利用unity3d属性来设置Inspe ...

  9. Linux命令学习-date

    date命令可以用来显示和修改系统日期时间,注意不是time命令. 1.在命令行输入date显示当前时间 [root@vm4 logs]# dateSat Nov 22 00:00:02 CST 20 ...

  10. AFN框架基本使用

    0.AFN框架基本使用 0.1 AFN内部结构 AFN结构体 - NSURLConnection + AFURLConnectionOperation(已经被废弃) + AFHTTPRequestOp ...