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下jstree简单应用 - v1.0
Apr 14 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
Ajax实现三级联动效果
Oct 05 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
php+dbfile开发小型留言本
2006/10/09 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python socket 聊天室实例代码详解
2019/11/14 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
大学生自我鉴定
2013/12/08 职场文书
称象教学反思
2014/02/03 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
质量负责人岗位职责
2015/02/15 职场文书
寒假安全保证书
2015/02/28 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
丧事主持词
2015/07/02 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
Python matplotlib多个子图绘制整合
2022/04/13 Python