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循环map功能的代码
Feb 26 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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实现MySQL更新记录的代码
2008/06/07 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
php中this关键字用法分析
2016/12/07 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
微信小程序日历效果
2018/12/29 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
物业管理专业个人的自我评价
2013/11/19 职场文书
网络工程师职业规划
2014/02/10 职场文书
中班开学寄语
2014/04/04 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
环卫工作汇报材料
2014/10/28 职场文书
施工安全员岗位职责
2015/04/11 职场文书
房贷收入证明范本
2015/06/12 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python