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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 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/09/26 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
Javascript学习笔记二 之 变量
2010/12/15 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
js导出txt示例代码
2014/01/14 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
js实现蒙版效果
2020/01/11 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
超市端午节活动方案
2014/01/23 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
初三学习决心书
2014/03/11 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
个人买房协议书范本
2014/10/06 职场文书
升学宴学生答谢词
2015/01/05 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android