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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 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
dedecms系统常用术语汇总
2007/04/03 PHP
php 数组的一个悲剧?
2011/05/11 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP模块memcached使用指南
2014/12/08 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
python字符串排序方法
2014/08/29 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Python3运算符常见用法分析
2020/02/14 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
家具厂厂长岗位职责
2014/01/01 职场文书
赔偿协议书范本
2014/09/12 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫