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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
详解javascript脚本何时会被执行
Feb 05 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
生成sessionid和随机密码的例子
2006/10/09 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
JS实现div居中示例
2014/04/17 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
python logging类库使用例子
2014/11/22 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
python队列queue模块详解
2018/04/27 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
简述数组与指针的区别
2014/01/02 面试题
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
大学生实习思想汇报
2014/01/12 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
学校开除通知书
2015/04/25 职场文书
岁月神偷观后感
2015/06/11 职场文书
七年级语文教学反思
2016/03/03 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server