在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. .NET三层架构例子超链接可以点击显示内容页面

    在研究了一个星期的三层架构写出的一个小功能,使用三层架构并实现点击新闻标题可以跳转到自己写的新闻页面. 首先是一个DBHelper,这个不是我自己写的,是朋友给我的 using System; usi ...

  2. kafka basic commands

    kafka-server-start.sh config/server.properties & kafka-server-stop.sh kafka-topics.sh    --creat ...

  3. 动手学习TCP: 环境搭建

    前一段时间通过Wireshark抓包,定位了一个客户端和服务器之间数据传输的问题.最近就抽空看了看<TCP/IP详解 卷1>中关于TCP的部分,书中用了很多例子展示了TCP/IP协议中的一 ...

  4. NOIP2007 T2纪念品分组 解题报告-S.B.S.

    #include<iostream> #include<cstdio> #include<cstring> #include<cmath> #inclu ...

  5. 好玩的-记最近玩的几个经典ipad ios游戏

    最近回了趟家,在家里闲着没事去app store找了找一些高分游戏玩一玩,下面就是我最近玩的游戏. 海岛奇兵 想必大家都很了解,这是由开发过clash of clan部落冲突的公司所开发的另一款多人策 ...

  6. HDU 2491 Priest John's Busiest Day

    贪心.. #include<iostream> #include<string.h> #include<math.h> #include <stdio.h&g ...

  7. 利用Clip制作打洞效果

    起因 如上篇博文所说,连线原型需要在中间文字上下各留15像素的空白.设计师完成原型之后,问我有没有办法实现,我说,我能想到两种实现方式.其中一种就是上篇博文所说的OpacityMask.第二种就是使用 ...

  8. java 16 -4 LinkedList的特有功能

    了解 LinkedList的特有功能: A:添加功能 public void addFirst(Object e) public void addLast(Object e) B:获取功能 publi ...

  9. Python进阶-面向对象

    类的成员 类的成员可以分为三类:字段.方法.属性 一:字段: 普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同 普通字段属于对象 静态字段属于类 字段的定义和使用 ...

  10. 003医疗项目-关于<context:property-placeholder location="classpath:db.properties"/>的问题

    项目结构如下: