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 相关文章推荐
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
简单实现JS计算器功能
Dec 21 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 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
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
简单的Python的curses库使用教程
2015/04/11 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
python字符类型的一些方法小结
2016/05/16 Python
浅谈Python peewee 使用经验
2017/10/20 Python
同时安装Python2 & Python3 cmd下版本自由选择的方法
2017/12/09 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
从0开始的Python学习016异常
2019/04/08 Python
一行python实现树形结构的方法
2019/08/09 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
安全生产投入制度
2014/01/29 职场文书
成立公司计划书
2014/05/07 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
教师工作表现评语
2014/12/31 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书