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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
javascript时区函数介绍
Sep 14 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
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
1.PHP简介
2006/10/09 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php 使用array函数实现分页
2015/02/13 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
flash遮住div问题的正确解决方法
2014/02/27 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
python写入中英文字符串到文件的方法
2015/05/06 Python
python类和继承用法实例
2015/07/07 Python
Python中装饰器高级用法详解
2017/12/25 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
国际书籍零售商:Wordery
2017/11/01 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
水果连锁超市创业计划书
2014/01/24 职场文书
大学军训感言200字
2014/02/26 职场文书
投标单位介绍信
2015/05/05 职场文书
淮海战役观后感
2015/06/11 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
中学团支部工作总结
2015/08/13 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript