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 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
面向对象的javascript(笔记)
Oct 06 Javascript
jquery 插件学习(三)
Aug 06 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
再探JavaScript作用域
Sep 24 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
React组件的三种写法总结
Jan 12 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 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
一个捕获函数输出的函数
2007/02/14 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
yii上传文件或图片实例
2014/04/01 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
Javascript 编码约定(编码规范)
2018/03/11 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
python批量制作雷达图的实现方法
2016/07/26 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
公司营业员的工作总结自我评价
2013/10/05 职场文书
合作协议书范本
2014/04/17 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
发票退票证明
2015/06/24 职场文书
redis实现排行榜功能
2021/05/24 Redis
python实现层次聚类的方法
2021/11/01 Python
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA