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 appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
JavaScript实现下拉列表
Jan 20 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中使用Oracle数据库(6)
2006/10/09 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详解python使用turtle库来画一朵花
2019/03/21 Python
python异常触发及自定义异常类解析
2019/08/06 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
英国女士家居服网站:hush
2017/08/09 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
个性婚礼策划方案
2014/05/17 职场文书
公司地址变更通知
2015/04/25 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android