在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. python 练习购物车小程序

    # -*- coding:utf-8 -*- shp = [ ['iphone',5000], ['offee',35], ['shoes',800] ] pric_list = [] e = int ...

  2. BusyBox Init

    嵌入式系统内核启动后的第一个程序就是init,一般位于/sbin/init(一般是符号链接到/bin/busybox), 但有些也会直接放在根目录下如linuxrc,busybox的init不支持多级 ...

  3. C/C++ 位域

    //假设硬件平台是intel x86(little endian) typedef unsigned int uint32_t; void inet_ntoa(uint32_t in) { ]; re ...

  4. 卡拉兹(Callatz)猜想

    题目描述 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去,最后一定在某一步 得到n=1.卡拉兹在195 ...

  5. Hadoop 概述

    Hadoop 是 Apache 基金会下的一个开源分布式计算平台,以 HDFS 分布式文件系统 和 MapReduce 分布式计算框架为核心,为用户提供底层细节透明的分布式基础设施.目前,Hadoop ...

  6. 最小生成树之Kruskal算法

    用Kruskal方法解决无向连通图最小生成树问题: 1所有的点初始化的时候自成一个集合 2所有的边按照权值大小,从小到大排序 3选取权值小的边加入现有集合中,且加入后必须不构成环路,加入后,记录点的祖 ...

  7. Openstack-Ceilometer-SNMP的使用

    1. 物理服务器配置 1.1安装 #yum install -y net-snmp net-snmp-utils 1.2      配置 复制[附件]中snmpd.conf文件到/etc/snmp/目 ...

  8. 半径无关单核单线程最快速高斯模糊实现(附完整C代码)

    之前,俺也发过不少快速高斯模糊算法. 俺一般认为,只要处理一千六百万像素彩色图片,在2.2GHz的CPU上单核单线程超过1秒的算法,都是不快的. 之前发的几个算法,在俺2.2GHz的CPU上耗时都会超 ...

  9. 边工作边刷题:70天一遍leetcode: day 71-1

    Longest Substring with At Most K Distinct Characters 要点:要搞清楚At Most Two Distinct和Longest Substring W ...

  10. 2014 Super Training #9 F A Simple Tree Problem --DFS+线段树

    原题: ZOJ 3686 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3686 这题本来是一个比较水的线段树,结果一个ma ...