在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. 启动rabbitmq web管理后台插件

    安装完rabbitmq server之后,访问http://server_ip:15672/  无法打开网页, 通过netstat -ano |grep 15672 查看此端口号并没有开启 需要启用 ...

  2. 迅为4412开发板支持AVIN视频输入/AV监控摄像头输入模块

    AVIN模块(iTOP-4412开发板专用) 产品介绍:视频输入/AV监控摄像头输入模块: 该模块及配套的软件为开发视频采集.监控.车载后视等产品提供了很好的参考. iTOP-4412 开发平台 开发 ...

  3. Java zip and unzip demo

    目录结构如下: import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import ...

  4. 【ASP.NET 基础】ASP.NET内置对象

    准确地说,asp.net 并没有内置对象这一说,jsp 里确实把 request.response 这些当作 jsp 的内置对象,这里只不过是借用了一下 jsp 的说法而已.在 Web 中处于中心的是 ...

  5. Zbrush遮罩边界该怎么实现羽化和锐化

    很多情况下为了雕刻制图需要,在ZBrush®中不仅要使用边缘清晰的遮罩,有时还要将遮罩边缘变得模糊,做羽化效果.那么如何在ZBrush中实现羽化遮罩效果或锐化遮罩效果,本文将做详细讲解. 若有疑问可直 ...

  6. 2014 Super Training #6 F Search in the Wiki --集合取交+暴力

    原题: ZOJ 3674 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3674 题意不难理解,很容易想到用暴力,但是无从下 ...

  7. WPF窗口阴影和夜间模式的实现

    窗口阴影 实现 因项目需要给用户一定提示,设计师建议在鼠标进入时显示窗口阴影,离开时取消窗口阴影. 很自然,都会想到直接在窗口的内容或者自定义窗口的最外层元素上加效果.示例如下: <Grid&g ...

  8. Vector3.Dot 判断方位

    判断方位 假设空间中有这几个坐标,判断一个物体在另一个物体的左边还是右边,前后还是后面 物体空间图 假如以C为中心,判断L是在它的左边还是右边 判断方法 using UnityEngine; usin ...

  9. linux系统终端命令提示符设置(PS1)记录

    PS(Prompt Sign)指的是命令提示符,在日常运维工作中为了方面操作管理,有时会设定PS1环境变量.废话不多说,下面开始记录下Linux中PS1设置 在/etc/.bashrc中,找到PS1变 ...

  10. iOS sha1加密算法

    最近在项目中使用到了网络请求签名认证的方法,于是在网上找关于OC sha1加密的方法,很快找到了一个大众使用的封装好的方法,以下代码便是 首先需要添加头文件 #import<CommonCryp ...