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 相关文章推荐
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
浅谈Python 对象内存占用
2016/07/15 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
np.dot()函数的用法详解
2020/01/17 Python
python爬虫实现获取下一页代码
2020/03/13 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
旷工检讨书1000字
2015/01/01 职场文书
工程服务质量承诺书
2015/04/29 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python