jQuery使用$.each遍历json数组的简单实现方法


Posted in Javascript onApril 18, 2016

本文实例讲述了jQuery使用$.each遍历json数组的简单实现方法。分享给大家供大家参考,具体如下:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=gb2312" />
 <title>jquery $.each遍历json数组方法</title>
 <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
 <script>
 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 ); 
 });
 </script>
</body>
</html>
 </body>
</html>

jquery 对象的 $().each() 方法,此方法可用于例遍任何对象

回调函数拥有两个参数:

第一个为对象的成员或数组的索引

例遍数组,同时使用元素索引和内容

$.each( [0,1,2], function(index, content){
 alert( "item #" + index + " its value is: " + content );
});

第二个为对应变量或内容

如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。

jquery.each(obj,fn,arg)

该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数args。

1.obj对象是数组

each方法会对数组中子元素的逐个进行fn函数调用,直至调用某个子元素返回的结果为false为止,也就是说,我们可以在提供的fn函数进行处理,使 之满足一定条件后就退出each方法调用。当each方法提供了arg参数时,fn函数调用传入的参数为arg,否则为:子元素索引,子元素本身

2.obj 对象不是数组

该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。

jquery.each=function( obj, fn, args ) {
if ( args ) {
if ( obj.length == undefined ){
for ( var i in obj )
fn.apply( obj, args );
}else{
for ( var i = 0, ol = obj.length; i < ol; i++ ) {
if ( fn.apply( obj, args ) === false )
break;
       }
      }
} else {
if ( obj.length == undefined ) {
for ( var i in obj )
fn.call( obj, i, obj );
}else{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){}
      }
}
return obj;
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
Vue渲染过程浅析
Mar 14 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 #Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 #Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 #Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 #Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 #Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 #Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 #Javascript
You might like
PHP strtok()函数的优点分析
2010/03/02 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
javascript中 try catch用法
2015/08/16 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python 数据结构之旋转链表
2017/02/25 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python字符串查找函数的用法详解
2019/07/08 Python
python turtle 绘制太极图的实例
2019/12/18 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
局域网定义和特性
2016/01/23 面试题
节约电力资源的建议书
2014/03/12 职场文书
洗发水广告词
2014/03/13 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书