在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. 基础总结篇之一:Activity生命周期

    子曰:溫故而知新,可以為師矣.<論語> 学习技术也一样,对于技术文档或者经典的技术书籍来说,指望看一遍就完全掌握,那基本不大可能,所以我们需要经常回过头再仔细研读几遍,以领悟到作者的思想精 ...

  2. Elasticsearch Scripts disabled

    Es 2.2版本中,在查询语句中使用script 时,提示如下错误 scripts of type [inline], operation [aggs] and lang [groovy] are d ...

  3. ubuntu下ROS安装时sudo rosdep init和rosdep update的解决方法

    问题: 在ubuntu上多次安装matlab选择合适的版本来调用摄像头,终于把系统搞坏了,重装系统后,ROS无法安装,每次安装到sudo rosdep init和rosdep update报错的问题, ...

  4. Linux系统搭建LAMP平台

    知识背景(来自:百度百科): LAMP指的Linux(操作系统).Apache HTTP 服务器,MySQL(有时也指MariaDB,数据库软件) 和PHP(有时也是指Perl或Python) 的第一 ...

  5. Genesis 2.8-2.12

    And the LORD God planted a garden eastward in Eden; and there he put the man whom he had formed. 9 A ...

  6. 基于go-ceph创建CEPH块设备及快照

    一.代码执行前准备 1.系统中安装了CEPH集群 2.GOPATH目录下存在src/github.com/noahdesu/go-ceph代码库 3.在ubuntu 14.04下还需apt-get l ...

  7. POJ 3304 Segments --枚举,几何

    题意: 给n条线段,问有没有一条直线,是每条线段到这条直线上的投影有一个公共点. 解法: 有公共点说明有一条这条直线的垂线过所有线段,要找一条直线过所有线段,等价于从所有线段中任选两端点形成的直线存在 ...

  8. POJ 1990 MooFest --树状数组

    题意:牛的听力为v,两头牛i,j之间交流,需要max(v[i],v[j])*dist(i,j)的音量.求所有两两头牛交谈时音量总和∑(max(v[i],v[j])*abs(x[j]-x[i])) ,x ...

  9. C++基础笔记(二)C++对C的扩展

    Xcode创建C++项目 1.新建一个MAC工程(command line tool) 2.导入头文件 3.修改文件后缀(*.m-->*.mm) 4.修改主函数中的OC代码为C++的代码   动 ...

  10. Android Studio 三种添加插件的方式,androidstudio

    前几篇blog我们介绍了如何安装和配置Android Studio,这篇Blog我们来聊聊如何给Android Studio添加插件,添加插件的路径有三种,我把他们分类如下: 点击设置小按钮 点击[P ...