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折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
react antd实现动态增减表单
Jun 03 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知道与问问的采集插件代码
2010/10/12 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
安全生产年活动总结
2014/08/29 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
谢师宴邀请函
2015/02/02 职场文书
先进教师个人总结
2015/02/11 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书