jQuery $.each遍历对象、数组用法实例


Posted in Javascript onApril 16, 2015

通过它,你可以遍历对象、数组的属性值并进行处理。

使用说明

each函数根据参数的类型实现的效果不完全一致:

1、遍历对象(有附加参数)

$.each(Object, function(p1, p2) {
     this;       //这里的this指向每次遍历中Object的当前属性值

     p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

 

2、遍历数组(有附件参数)

$.each(Array, function(p1, p2){
     this;       //这里的this指向每次遍历中Array的当前元素

     p1; p2;     //访问附加参数

}, ['参数1', '参数2']);

 

3、遍历对象(没有附加参数)

$.each(Object, function(name, value) {
     this;      //this指向当前属性的值

     name;      //name表示Object当前属性的名称

     value;     //value表示Object当前属性的值

});

[code]

 
4、遍历数组(没有附加参数)
[code]

$.each(Array, function(i, value) {
     this;      //this指向当前元素

     i;         //i表示Array当前下标

     value;     //value表示Array当前元素
});

下面提一下jQuery的each方法的几种常用的用法
 var arr = [ "one", "two", "three", "four"];     

 $.each(arr, function(){     

    alert(this);     

 });     

//上面这个each输出的结果分别为:one,two,three,four    

    

var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     

$.each(arr1, function(i, item){     

   alert(item[0]);     

});     

//其实arr1为一个二维数组,item相当于取每一个一维数组,   

//item[0]相对于取每一个一维数组里的第一个值   

//所以上面这个each输出分别为:1   4   7     

  

  

var obj = { one:1, two:2, three:3, four:4};     

$.each(obj, function(key, val) {     

    alert(obj[key]);           

});   

//这个each就有更厉害了,能循环每一个属性     

//输出结果为:1   2  3  4
Javascript 相关文章推荐
JavaScript对象模型-执行模型
Apr 28 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 #Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 #Javascript
JavaScript实现随机替换图片的方法
Apr 16 #Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 #Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 #Javascript
jquery插件bxslider用法实例分析
Apr 16 #Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 #Javascript
You might like
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
解析php入库和出库
2013/06/25 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
js常用正则表达式集锦
2019/05/17 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
js实现微信聊天界面
2020/08/09 Javascript
urllib2自定义opener详解
2014/02/07 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
小学数学教学反思
2014/02/02 职场文书
请假条范文大全
2014/04/10 职场文书
计算机软件专业求职信
2014/06/10 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python