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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
jquery 指南/入门基础
Nov 30 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
Vue双向绑定实现原理与方法详解
May 07 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递归调用的小技巧讲解
2013/02/19 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
javascript实现拖放效果
2015/12/16 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
使用Python从零开始撸一个区块链
2018/03/14 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
python把转列表为集合的方法
2019/06/28 Python
深入了解Django View(视图系统)
2019/07/23 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
财务信息服务专业自荐书范文
2014/02/08 职场文书
优秀学生事迹材料
2014/02/08 职场文书
大学生通用个人自我评价
2014/04/27 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
赞美教师的句子
2019/09/02 职场文书