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 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
Three.js实现简单3D房间布局
Dec 30 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
JavaScript如何优化逻辑判断代码详解
Jun 08 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获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
js实现星星打分效果
2020/07/05 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python中创建二维数组
2018/10/17 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
家电业务员岗位职责
2014/03/10 职场文书
团队会宣传标语
2014/10/09 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
详解Python中的for循环
2022/04/30 Python
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android