前端JQ遍历JSON

$.each()是对数组，json和dom结构等的遍历，说一下他的使用方法吧。

1、遍历一维数组

 var arr1=['aa','bb','cc','dd'];$.each(arr1,function(i,val){ //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值console.log(i+'```````'+val);

输出的结果为：

0```````aa
1```````bb
2```````cc
3```````dd

2、遍历二维数组

var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
$.each(arr2,function(i,item){ //两个参数，第一个参数表示下标，第二个参数表示一维数组中的每一个数组console.log(i+'````'+item);

输出的结果为：

0````aaa,bbb
1````ccc,ddd
2````eee,fff

此时可以对输出的一维数组进行遍历

$.each(item,function(i,val){  //遍历二维数组console.log(i+'`````'+val);})

输出的结果为：

0````aaa,bbb0`````aaa1`````bbb
1````ccc,ddd0`````ccc1`````ddd
2````eee,fff0`````eee1`````fff

3、处理json

var json1={key1:'a',key2:'b',key3:'c'};$.each(json1,function(key,value){  //遍历键值对console.log(key+'````'+value);})

输出的结果为：

key1````a
key2````b
key3````c

4、当二位数组中有json对象时

var arr3=[{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:22}];$.each(arr3,function(i,val){console.log(i+'`````'+val);   //输出/* 0`````[object Object] 1`````[object Object] i2`````[object Object]*/console.log(val.name); //获取每一个json里面的name值console.log(val["name"]);$.each(val,function(key,val2){console.log(key+'```'+val2);})});

5、处理dom元素

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>

$.each($('input:hidden'),function(i,val){console.log(i+'````'+val);/*0````[object HTMLInputElement]1````[object HTMLInputElement]2````[object HTMLInputElement]3````[object HTMLInputElement]*/console.log(val.name+'`````'+val.value);/* aaa`````111bbb`````222ccc`````333ddd`````444*/})

以上就是$.each()最基本的使用了，

jQuery中还有另外一种写法来遍历元素

$("input:hidden").each(function(i,val){  //第一个参数表示索引下标，第二个参数表示当前索引元素alert(i);alert(val.name);alert(val.value);
});

作者：freeah
出处：http://www.cnblogs.com/zhaixr/

前端JQ遍历JSON相关推荐

jq遍历json/数组
$(function() {//jq遍历json/数组var json =[{code:"101",val:"1111"},{code:"102&qu ...
前端js遍历json对象方法
环境操作系统: win7 情形最近遇到这么一个情况,后台使用LinkedHashMap处理好数据,在使用renderJson()返回数据的时候发现,数据的原有顺序没有了,后来才知道renderJs ...
[JQ权威指南]JQ遍历JSON数据
(1)功能描述,导航页面显示全部优秀学生所在年级,点击年级显示学生信息. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
js json遍历到html,js遍历json的key和value的实例_稚终_前端开发者
原生遍历json对象: 无规律: var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}]; for(var i=0,l=json.le ...
如何在命令行中使用jq将JSON转换为CSV
by Knut Melvær 通过纳特·梅尔瓦如何在命令行中使用jq将JSON转换为CSV (How to transform JSON to CSV using jq in the command ...
php怎么传json数据_php怎么接收前端传来的json数据
php怎么接收前端传来的json数据php 如何接收前端传来的json数据前端用JQ 生成一个有字段名和值格式的键值对的JSON 格式的字串转码后提交给后台的PHP 处理代码如下 json_ ...
JQ和JSON省市区练习
导入JQ和JSON文件 <head><meta charset="UTF-8"><title>省市区练习</title><sc ...
shell - jq 处理json
Useful Link: offical manual link:jq Manual (development version) 中文版:jq 中文手册(v1.5) | jq 中文手册常用操作:jq ...
php 返回一个json对象,PHP给前端返回一个JSON对象的实例讲解
解决问题:用php做后台时,如何给前端发起的AJAX请求返回一个JSON格式的"对象": 说明:我本身是一个前端,工作久了之后发现要是不掌握一门后端开发语言的话,总感觉有点无力.最 ...

前端JQ遍历JSON

前端JQ遍历JSON相关推荐

最新文章

热门文章