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>
jquery遍历json与数组方法总结each()相关推荐
- jquery 遍历java对象,js/jquery遍历对象和数组的方法分析【forEach,map与each方法】...
本文实例讲述了js/jquery遍历对象和数组的方法.分享给大家供大家参考,具体如下: JS forEach方法 arr[].forEach(function(value,index,array){ ...
- jquery 遍历json list js取得json值。
1.jquery 遍历json list var arr = [{ name: "john", lang: "js" },{ name: "nailw ...
- jQuery 遍历 JSON 对象
jQuery 遍历 JSON 对象 <一>: $(document).ready(function() { $("#Link").click(fu ...
- c语言遍历json数组,JQuery遍历json数组的3种方法
一.使用each遍历 $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法 ...
- jquery遍历json数组
一.使用each遍历 代码如下: $(function () { var tbody = ""; //------------遍历对象 .each的 ...
- Web jquery ajax,EL遍历 js刷新 jquery遍历json数组填充表格 等等随笔
1.ajaX 局部刷新 type- 请求的类型 url- 地址 data- 参数多的话用逗号隔开 在使用 jquery之前先添加:<script type="text/javas ...
- JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串
JS遍历JSON对象 JSON对象 var jsonObj = {"id": 102,"year": "2019-2020","l ...
- php怎么遍历json字符串数组,php-使用jquery遍历json数组
我从jQuery中获取错误: a为空 这是因为我添加了循环遍历json数据的代码: $(function () { $.ajax({ url: 'ajax_dashboard/api.php', // ...
- jQuery遍历对象、数组、集合
1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...
最新文章
- 一位软件工程师的6年总结【转】
- java 泛型例子_java中的泛型的一些常见例子
- c# 字典按ascii 排序_sort命令-将文件进行排序并输出
- MVC、MVP、MVVM,我到底该怎么选?
- VTK:vtkCellArray用法实战
- java读取Resources下文件
- oracle 分组 top10 sql,oracle sql 合龙 分组 聚合函数
- 如何学好前端,这5点你一定要知道!
- 高并发业务接口开发思路(实战)
- c语言单片机题目设计大全,单片机课程设计要求及参考题目
- 使用Unity粒子特效的基本步骤
- 基于stm32的自动调速风扇
- date_sub函数用法-----随笔记
- cuda中pinned memory(page-locked memory)
- js获取当前指定的前几天的日期(如当前时间的前七天的日期)
- uniapp 评价应用_uniapp打开应用市场(APP端)
- FreeSWITCH+CentOS7.9+firewalld+fail2ban Internet部署的安全加固实战
- BI神器Power Query(21)-- 同一列内多重替换(1)
- 达人评测 R7 PRO 6850HS 核显相当于什么显卡
- SVPWM与SPWM的区别
热门文章
- R语言ggplot2可视化在可视化图形的X轴标签中添加温度摄氏度符号(add temperature degree symbol on axis label)
- R语言构建随机森林模型randomForest分类模型并评估模型在测试集和训练集上的效果(accuray、F1、偏差Deviance):随机森林在Bagging算法的基础上加入了列采样(分枝特征随机)
- R语言write.xlsx函数将数据写入Excel文件:写入Excel文件并自定义表单的名称、将数据写入Excel文件新的表单(sheet)中、将文件保存为xls文件格式(而不是xlsx)
- R语言sunburst图(sunburst plot)可视化实战:使用sunburstR包和ggplot2包进行可视化
- R语言ggplot2可视化自定义图例标签间距实战:自定义图例标签间距、自定义图例与图像之间的间距
- R语言dplyr包使用group_by函数、arrange函数和filter函数获取每个分组的第一个、第N个、最后一个记录实战
- 多项式回归、分位数回归(Quantile Regression)、保序回归(Isotonic Regression)、RANSAC回归、核岭回归、基准回归模型(baseline)
- Python使用re模块进行正则匹配日期和时间
- python基础知识练习题
- 如何配置jdk环境变量