jQuery中$.each使用详解


Posted in Javascript onJanuary 29, 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当前属性的值
});

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

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

下面提一下jQuery的each方法的几种常用的用法

Js代码

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

本文就先到这里了,简单描述下jQuery中。$.each的使用方法,希望小伙伴们能够喜欢。

Javascript 相关文章推荐
Extjs单独定义各组件的实例代码
Jun 25 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 #Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 #Javascript
JSON格式的键盘编码对照表
Jan 29 #Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 #Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 #Javascript
AngularJS中的模块详解
Jan 29 #Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 #Javascript
You might like
多php服务器实现多session并发运行
2006/10/09 PHP
php5中类的学习
2008/03/28 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python中as用法实例分析
2015/04/30 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
python实现连连看游戏
2020/02/14 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
外企C语言笔试题
2013/11/10 面试题
幼师自我鉴定范文
2013/10/01 职场文书
有趣的广告词
2014/03/18 职场文书
关于安全的广播稿
2014/10/23 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
高一作文之暖冬
2019/11/09 职场文书
Jsonp劫持学习
2021/04/01 PHP
如何解决.cuda()加载用时很长的问题
2021/05/24 Python