jquery遍历json与数组方法总结
来自:http://www.php100.com/html/program/jquery/2013/0905/5927.html
先我们来参考each() 方法,each()规定为每个匹配元素规定运行的函数,返回 false 可用于及早停止循环
语法
$(selector).each(function(index,element))
例
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处理二维数组
var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
alert(i);
alert(item);
});
arr2为一个二维数组,item相当于取这二维数组中的每一个数组。
item[0]相对于取每一个一维数组里的第一个值
alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素
alert(item)将输出为 ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']
遍历json
[
{
"text" : "王家湾",
"value" : "9"
},
{
"text" : "李家湾",
"value" : "10"
},
{
"text" : "邵家湾",
"value" : "13"
}
]
jquery代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="script/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#letter-e .button").click(function(){
$.getJSON("e.json",function(data){
$("#dictionary").empty();
$.each(data,function(entryIndex,entry){
var html = '<div class="entry">';
html += '<div class="text">' + entry['text'] + '</div>';
html += '<div class="value">' + entry['value'] + '</div>';
html += '</div>';
$('#dictionary').append(html);
});
});
});
});
</script>
</head>
<body>
<div class="letters">
<div class="letter" id="letter-e">
<h3>E</h3>
<div class="button">Load</div>
</div>
</div>
<div id="dictionary">
</div>
</body>
</html>
一个完整的测试实例大家可参考
<mce:script type="text/javascript"><!--
$(
function()
{
/*
通用例遍方法,可用于例遍对象和数组。
不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。
回调函数拥有两个参数:
第一个为对象的成员或数组的索引
第二个为对应变量或内容
如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。
*/
/*例遍数组,同时使用元素索引和内容。
$.each( [0,1,2], function(index, content){
alert( "Item #" + index + " its value is: " + content );
});
var testPatterns =
[
'yyyy',
'yy',
'MMMM',
'MMM',
'MM',
'M',
'dd',
'd',
'EEEE',
'EEE',
'a',
'HH',
'H',
'hh',
'h',
'mm',
'm',
'ss',
's',
'S',
'EEEE MMMM, d yyyy hh:mm:ss.S a',
'M/d/yy HH:mm'
];
$.each(testPatterns,function(){document.write('<div>'+this+'</div><br />');});
*/
/*遍历对象,同时使用成员名称和变量内容。
$.each( { name: "John", lang: "JS" }, function(index, content){
//alert( "Object Name: " + index + ",And Its Value is: " + content );
alert( "Object Property Name Is: " + index + ",And Its Property Value is: " + content );
});
*/
/*例遍对象数组,同时使用成员变量内容。
var arr = [{ name: "John", lang: "JS" },{ name: "Nailwl", lang: "Jquery" },{ name: "吴磊", lang: "Ext" }];
$.each( arr, function(index, content){
alert( "The Man's No. is: " + index + ",And " + content.name + " is learning " + content.lang );
});
*/
}
);
// --></mce:script>
<title>Jquery each Demo</title>
</head>
<body>
</body>
</html>
jquery遍历json与数组方法总结的更多相关文章
- JQuery遍历json数组的3种方法
这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each.for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下 一.使用each遍历 $(functio ...
- Javascript/jQuery关于JSON或数组集合的几种循环方法
JavaScript遍历JSON或数组集合: /** * 根据json数据生成option树形控件 * 如果有children节点则自动生成树形数据 * @param {JSON} data * @p ...
- 用jquery解析JSON数据的方法以及字符串转换成json的3种方法
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- jquery 遍历 json【转】
jquery 遍历 json <HTML> <HEAD> <meta http-equiv="content-Type" content=" ...
- 【转】 jquery遍历json数组方法
$(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...
- JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串
JS遍历JSON对象 JS遍历JSON对象 <script> var obj = { "goodsid": "01001", "goods ...
- jQuery遍历对象、数组、集合实例
1.jquery 遍历对象 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ...
- jquery遍历json的几种方法
for循环: 1 <script> 2 var obj = { 3 "status":1, 4 "bkmsg":"\u6210\u529f ...
随机推荐
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- CSDN下载频道于2014年7月17日改版,23日-24日系统维护
尊敬的用户你们好: CSDN于2005年推出了下载服务,经过数年的发展,下载频道的用户已经为无数用户提供了帮助.分享500万的技术资源. 感谢用户们的资源共享精神,以及对CSDN下载频道的支持 下载频 ...
- Eclipse安装Properties Editore插件
Properties Editor for Eclipse3[1].0-3.2安装使用-http://jzgl-javaeye.iteye.com/blog/386010 PropertiesEdit ...
- Spring boot centos部署启动停止脚本
原文地址:http://www.cnblogs.com/skyblog/p/7243979.html 使用脚本启动和关闭服务,centos下的脚本启动和关闭可以如下: start(){ now=`da ...
- dbHelper类操作数据库
using System; using System.Collections; using System.Configuration; using System.Data; using System. ...
- 水滴状的自己定义视图,让您摆脱单调的Dialog
转载请注明出处:王亟亟的大牛之路 如今各种各样的进度条的呈现方式各种各样,我们老旧的条状条子和转圈圈的方式已经无法满足我们的业务需求,今天亟亟上的是一个水滴状循环滚动的一个自己定义视图.你能够把他用在 ...
- ARM(CM3)的汇编指令
转http://blog.csdn.net/gaojinshan/article/details/11534569 16位数据操作指令 名字 功能ADC 带进位加法(ADD with Carry) ...
- Linux中如何配置IP
与网络相关的文件:1) /etc/sysconfig/network 设置主机名称及能否启动Network2) /etc/sysconfig/network-scripts/ifcfg-eth ...
- php常见的类库-文件操作类
工作中经常用php操作文件,因此把常用文件操作整理出来: class hylaz_file{ /** * Read file * @param string $pathname * @return s ...
- Chap 2 Representing and Manipulating Information (CS:APP)
-------------------------------------------------------------------------------------------------- A ...