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 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
javascript截取字符串小结
Apr 28 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
如何运行Python程序的方法
2013/04/21 Python
Python and、or以及and-or语法总结
2015/04/14 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
会计专业自荐信
2014/06/03 职场文书
学校节能减排方案
2014/06/13 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
2015大学生实训报告
2014/11/05 职场文书
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers