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的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
Prototype Date对象 学习
Jul 12 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
js中实现继承的五种方法
Jan 25 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
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
JS backgroundImage控制
2009/05/19 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
python文件和目录操作函数小结
2014/07/11 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python网站验证码识别
2016/01/25 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
python爬虫添加请求头代码实例
2019/12/28 Python
基于python代码批量处理图片resize
2020/06/04 Python
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
美术教师个人总结
2015/02/06 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书