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 相关文章推荐
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
vue中的scope使用详解
Oct 29 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
javascript常用方法汇总
2014/12/02 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
《燕子》教学反思
2014/02/18 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
2014年招商工作总结
2014/11/22 职场文书
学生保证书格式
2015/02/27 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang