Jquery中map函数的用法


Posted in Javascript onJune 03, 2016

很久没用map()这个函数了,由于最近看一篇react的文章,其中有谈到map()这个函数,于是就重新查了一些资料,发现map()函数可以用在不同的地方,下面小编总结具有内容分享给大家,也方便今后查找。

其实,本人一直很少用map()这个函数,因为最近看一篇React的文章,其实有谈及map()函数,于是自己也重新查了一些资料,发现map()函数也可以用在不同的地方:

map()函数把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的Jquery对象

语法:.map(callback(index,domElement))

callback(index,domElment)》》》》对当前集合中每个元素调用的函数对象;

如:

<html>
<ul> 
<li id="num1"> 
<p>你好</p> 
</li> 
<li id="num2"> 
<p>你好</p> 
</li> 
<li id="num3"> 
<p>你好</p> 
</li>
</ul> 
</html>

js:

var result=$("ul li").map(function(i,val){ 
console.log(i,val);// 
return this.id;});

解释:

console.log(i,val);

打印如图所示:

Jquery中map函数的用法

console.log( typeof result) // ---当然,如果打印这个result类型是object对象;
Anyway,It is ok!let us go on!

由于返回值是jquery封装的数组,那么我们使用get()来处理返回的对象以得到基础的数组

PS:而get()方法获得由选择器指定的Dom元素语法如下:

$(selector).get(index);index:可选。规定的获取哪个匹配元素(通过index编号);

那么,代码继续:

var result=$("ul li").map(function(i,val){ 
console.log(i,val); 
return this.id;});console.log( typeof result) // ---objectconsole.log(result.get());

这个时候,result.get()会得到如图结果:

Jquery中map函数的用法

PS:它会得到一维数组,可能有些情况下大家会需要得到这样的效果,只要在适当的时候用get()方法就可以了!

当然,我们可以连上拼接join()方法抽离数组;

var result=$("ul li").map(function(i,val){ 
console.log(i,val); 
return this.id;});console.log( typeof result) // ---objectconsole.log(result.get());
console.log(result.get().join(','))

如图:

Jquery中map函数的用法

最后,总结一些:在callback函数内部,this引用每次迭代的当前DOM元素。该函数可返回单独的数据项,或者是要被插入结果集中的数据项的数组。如果返回的是数组,数组内的元素会被插入其中。如果函数返回null或者undefined,则不会插入任何元素。

以上所述是小编给大家介绍的Jquery中map函数的用法 ,希望对大家大家有所帮助!

Javascript 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 #Javascript
jQuery EasyUI 入门必看
Jun 03 #Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 #Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 #Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 #Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 #Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 #Javascript
You might like
php获取301跳转URL简单实例
2013/12/16 PHP
ThinkPHP分页实例
2014/10/15 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
深入理解Python中range和xrange的区别
2017/11/26 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python初学者常见错误详解
2019/07/02 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
如何通过命令行进入python
2020/07/06 Python
vscode调试django项目的方法
2020/08/06 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
早读课迟到检讨书
2014/09/25 职场文书
python字符串常规操作大全
2021/05/02 Python
Python实现老照片修复之上色小技巧
2021/10/16 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers