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应该怎样学
Apr 16 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
JS交换变量的方法
Jan 21 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
webpack打包非模块化js的方法
Oct 24 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 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
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
老生常谈Python序列化和反序列化
2017/06/28 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python定时任务sched模块用法示例
2018/07/16 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python API自动化框架总结
2019/11/12 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
人力资源作业细则
2014/03/03 职场文书
年终总结会主持词
2014/03/25 职场文书
经典禁毒标语
2014/06/16 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
出国导师推荐信
2015/03/25 职场文书
出纳岗位职责范本
2015/03/31 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书