jQuery函数map()和each()介绍及异同点分析


Posted in Javascript onNovember 08, 2014

方法语法:map()

map(callback)
为包装集中的每一个元素调用回调函数,并将返回值收集到jQuery对象的实例中。
参数
callback (函数)回调函数,为包装集中的每个元素调用该函数。
比如,下面的代码将页面上所有div元素的id值收集到一个javascript数组中:

var iDs = $("div").map(function(){

    return (this.id==undefined) ? null :this.id;

}).get();

再看如下的表单中包含的一组 checkbox 框:

<form method="post" action="">

<fieldset>

<div>

<label for="two">2</label>

<input type="checkbox" value="2" id="two" name="number[]">

</div>

<div>

<label for="four">4</label>

<input type="checkbox" value="4" id="four" name="number[]">

</div>

<div>

<label for="six">6</label>

<input type="checkbox" value="6" id="six" name="number[]">

</div>

<div>

<label for="eight">8</label>

<input type="text" value="8" id="eight" name="number[]">

</div>

</fieldset>

</form>

我们可以得到一个用逗号分隔的复选框 ID:

$(':checkbox').map(function() {

return this.id;

}).get().join();

此调用的结果是字符串, "two,four,six".

在回调函数中,this指向每次迭代中的当前DOM元素。

方法语法:each()

each(iterator)
遍历匹配集里所有的元素,为每一个元素调用传入的迭代函数
iterator (函数)回调函数,为匹配集中的每个元素调用
each()方法也可以用来遍历javascript数组对象甚至单个对象,举个栗子:

$([a,b,c,d]).each(function(){

    alert(this);

})

这个语句会为传入$()中数组的每个元素调用迭代函数,函数中的this指向单独的数组项。

每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。更重要的是,回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。

假设页面上有这样一个简单的无序列表。

<ul>

<li>foo</li>

<li>bar</li>

</ul>

你可以选中并迭代这些列表:

$( "li" ).each(function( index ) {

console.log( index + ": "" + $(this).text() );

});

列表中每一项会显示在下面的消息中:

0: foo
1: bar
两者的区别

map()方法主要用来遍历操作数组和对象,each()主要用于遍历jquery对象。

each()返回的是原来的数组,并不会新创建一个数组。
map()方法会返回一个新的数组。如果在没有必要的情况下使用map,则有可能造成内存浪费。

Javascript 相关文章推荐
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
javascript每日必学之多态
Feb 23 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 #Javascript
js 操作符汇总
Nov 08 #Javascript
jquery的总体架构分析及实现示例详解
Nov 08 #Javascript
jquery常用方法及使用示例汇总
Nov 08 #Javascript
JQuery遍历json数组的3种方法
Nov 08 #Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 #Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 #Javascript
You might like
PHP完整的日历类(CLASS)
2006/11/27 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
常用简易JavaScript函数
2009/04/09 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python兔子毒药问题实例分析
2015/03/05 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Django通过json格式收集主机信息
2020/05/29 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
序列化Python对象的方法
2020/08/01 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
校本教研工作制度
2014/01/22 职场文书
就业协议书
2014/09/12 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
会计师事务所实习证明
2014/11/16 职场文书
小学校长个人总结
2015/03/03 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
摘录式读书笔记
2015/07/01 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书