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 动态创建VML的方法
Oct 14 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
javascript每日必学之循环
Feb 19 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 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
flash用php连接数据库的代码
2011/04/21 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
python实现倒计时的示例
2014/02/14 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Python常用的爬虫技巧总结
2016/03/28 Python
浅析Git版本控制器使用
2017/12/10 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
关于环保的演讲稿
2014/05/10 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
怎么写工作检讨书
2014/11/16 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers
MYSQL 表的全面总结
2021/11/11 MySQL
室外天线与收音机天线杆接合方法
2022/04/05 无线电
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis