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中的getMilliseconds()方法使用详解
Jun 10 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
javascript中导出与导入实现模块化管理教程
Dec 03 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开发文件系统实例讲解
2006/10/09 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
node.js中watch机制详解
2014/11/17 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
详解python进行mp3格式判断
2016/12/23 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python openpyxl使用方法详解
2019/07/18 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python多进程重复加载的解决方式
2019/12/13 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
学生自我鉴定模板
2013/12/30 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
超市督导岗位职责
2015/04/10 职场文书
党小组考察意见
2015/06/02 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
django上传文件的三种方式
2021/04/29 Python