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 相关文章推荐
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
JS实现音乐钢琴特效
Jan 06 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 判断网页是否是utf8编码的方法
2014/06/06 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
python的常见命令注入威胁
2013/02/18 Python
Python生成器(Generator)详解
2015/04/13 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python去掉空白行的多种实现代码
2018/03/19 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python设置环境变量的原因和方法
2019/06/24 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
大学生入党思想汇报
2014/01/01 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
剪彩仪式主持词
2014/03/19 职场文书
班级标语大全
2014/06/21 职场文书
安全教育主题班会总结
2015/08/14 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js