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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
js实现文字截断功能
Sep 14 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
js 调用百度分享功能
Feb 27 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
小程序红包雨的实现示例
Feb 19 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 默默经典版本
2009/08/04 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
jquery 年会抽奖程序
2011/12/22 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
python中实现指定时间调用函数示例代码
2017/09/08 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python实现音乐下载器
2018/04/15 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
python 输出所有大小写字母的方法
2019/01/02 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
金融专业个人的自我评价
2013/10/18 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
反腐倡廉标语
2014/06/24 职场文书
终止劳动合同通知书
2015/04/16 职场文书
航班延误投诉信
2015/07/02 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android