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团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
JavaScript类库D
Oct 24 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 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自动注册登录验证机制实现代码
2011/12/20 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
php实现的通用图片处理类
2015/03/24 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
用Python实现协同过滤的教程
2015/04/08 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
对Python中range()函数和list的比较
2018/04/19 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
django之自定义软删除Model的方法
2019/08/14 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
Python 图片处理库exifread详解
2021/02/25 Python
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
外包公司软件测试工程师
2014/11/01 面试题
小班上学期个人总结
2015/02/12 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
python的变量和简单数字类型详解
2021/09/15 Python