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 相关文章推荐
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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对大文件进行读取操作的实现代码
2013/01/23 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
Nodejs处理异常操作示例
2018/12/25 NodeJs
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
利用Python检测URL状态
2019/07/31 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
介绍一些UNIX常用简单命令
2014/11/11 面试题
护理专业本科生自荐信
2013/10/01 职场文书
优秀学生获奖感言
2014/02/15 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
同居协议书范本
2014/04/23 职场文书
工地标语大全
2014/06/18 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
酒店开业主持词
2015/07/02 职场文书
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python