jquery遍历json与数组方法总结each()

95 阅读 0 评论 63 点赞

我是靠谱客的博主阔达便当，最近开发中收集的这篇文章主要介绍jquery遍历json与数组方法总结each()，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在jquery中遍历数组或json数组我们使用最多的方法是each这个函数了或使用foreach,for也是可以实现的，下面我来给大家详细介绍jquery遍历json与数组实现。代码如下复制代码先我们来参考each() 方法。

在jquery中遍历数组或json数组我们使用最多的方法是each这个函数了或使用foreach,for也是可以实现的，下面我来给大家详细介绍jquery遍历json与数组实现。

先我们来参考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(arr2, 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 data

[
{
  "text" : "王家湾",
  "value" : "9"
},
{
  "text" : "李家湾",
  "value" : "10"
},
{
  "text" : "邵家湾",
  "value" : "13"
}
]

alert(data[0]["text"]);//邵家湾

<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(data,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>

一个完整的测试实例大家可参考

$(
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>