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 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
Vue中fragment.js使用方法小结
Feb 17 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
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
php图片上传类 附调用方法
2016/05/15 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python程序退出方式小结
2017/12/09 Python
python实现视频分帧效果
2019/05/31 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
迟到早退检讨书
2014/02/10 职场文书
中班中秋节活动反思
2014/02/18 职场文书
合同协议书格式
2014/04/18 职场文书
努力学习演讲稿
2014/05/10 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
党员评议自我评价
2015/03/03 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers