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 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
手写Vue源码之数据劫持示例详解
Jan 04 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
一些关于PHP的知识
2006/11/17 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
深入理解vue中的$set
2017/06/01 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
Python中type的构造函数参数含义说明
2015/06/21 Python
python实现ID3决策树算法
2017/12/20 Python
Python实现的堆排序算法示例
2018/04/29 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
教师师德反思材料
2014/02/15 职场文书
如何写好自荐信
2014/04/07 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
Python中异常处理用法
2021/11/27 Python