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数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
Node.js学习入门
Jan 03 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
javascript实现评分功能
Jun 24 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
微信小程序实现多张图片上传功能
Nov 18 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/01/18 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
php生成微信红包数组的方法
2019/09/05 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python的常见矩阵运算(小结)
2019/08/07 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
保送生自荐信范文
2013/10/06 职场文书
共青团员自我评价范文
2014/09/14 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
大学生团日活动总结
2015/05/06 职场文书
诉讼和解协议书
2016/03/23 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
JUnit5常用注解的使用
2021/07/02 Java/Android
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python