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 相关文章推荐
自动更新作用
Oct 08 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 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
php _autoload自动加载类与机制分析
2012/02/10 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
php语法检查的方法总结
2019/01/21 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
pytorch之添加BN的实现
2020/01/06 Python
django中嵌套的try-except实例
2020/05/21 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
美国在线工具商店:Acme Tools
2018/06/26 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
新品发布会主持词
2014/04/02 职场文书
干部作风建设工作总结
2014/10/29 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
导游词之介休绵山
2019/12/31 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
Java实现房屋出租系统详解
2021/10/05 Java/Android