当前位置: 首页 > news >正文

Jquery 中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);打印如图所示:




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) // ---object
console.log(result.get());

这个时候,result.get()会得到如图结果:

PS:它会得到一维数组,可能有些情况下大家会需要得到这样的效果,只要在适当的时候用get()方法就可以了!

当然,我们可以连上拼接join()方法抽离数组;
var result=$("ul li").map(function(i,val){
console.log(i,val);
return this.id;
});

console.log( typeof result) // ---object
console.log(result.get());
console.log(result.get().join(','))


如图:

最后,总结一些:
在callback函数内部,this引用每次迭代的当前DOM元素。该函数可返回单独的数据项,或者是要被插入结果集中的数据项的数组。
如果返回的是数组,数组内的元素会被插入其中。如果函数返回null或者undefined,则不会插入任何元素。




 

转载于:https://www.cnblogs.com/andyWeb/p/5552861.html

相关文章:

  • 大公司都有哪些开源项目~~~简化版
  • Java 网络IO编程总结(BIO、NIO、AIO均含完整实例代码)
  • Arm开发板+Qt学习之路-multiple definition of
  • 清除windows系统垃圾文件简易脚本(bat)
  • 1225 八数码难题
  • ES6初探,什么是ES6
  • who命令
  • Android 采用Layout Inflater创建一个View对象
  • VS 类快捷键
  • /etc/motd and /etc/issue
  • java中的异常处理机制_函数覆盖时的异常特点
  • 关于狄克斯特拉算法(dijkstra)总结
  • CSS3实现两行或三行文字,然后多出的部分省略号代替
  • 函数与类
  • DT时代,哪些企业可以成为大数据公司?
  • 自己简单写的 事件订阅机制
  • 【Leetcode】104. 二叉树的最大深度
  • CSS相对定位
  • Intervention/image 图片处理扩展包的安装和使用
  • javascript数组去重/查找/插入/删除
  • maya建模与骨骼动画快速实现人工鱼
  • mockjs让前端开发独立于后端
  • node-glob通配符
  • PHP 小技巧
  • Python利用正则抓取网页内容保存到本地
  • Redux 中间件分析
  • Sass 快速入门教程
  • VirtualBox 安装过程中出现 Running VMs found 错误的解决过程
  • 成为一名优秀的Developer的书单
  • 从零开始学习部署
  • 解决jsp引用其他项目时出现的 cannot be resolved to a type错误
  • 看完九篇字体系列的文章,你还觉得我是在说字体?
  • 扫描识别控件Dynamic Web TWAIN v12.2发布,改进SSL证书
  • 我的zsh配置, 2019最新方案
  • 小程序 setData 学问多
  • HanLP分词命名实体提取详解
  • Nginx实现动静分离
  • ​Z时代时尚SUV新宠:起亚赛图斯值不值得年轻人买?
  • ###51单片机学习(1)-----单片机烧录软件的使用,以及如何建立一个工程项目
  • (1)(1.13) SiK无线电高级配置(六)
  • (10)工业界推荐系统-小红书推荐场景及内部实践【排序模型的特征】
  • (4) PIVOT 和 UPIVOT 的使用
  • (day6) 319. 灯泡开关
  • (超详细)语音信号处理之特征提取
  • (附源码)springboot工单管理系统 毕业设计 964158
  • (附源码)springboot炼糖厂地磅全自动控制系统 毕业设计 341357
  • (附源码)计算机毕业设计SSM教师教学质量评价系统
  • (每日持续更新)jdk api之FileFilter基础、应用、实战
  • (十八)SpringBoot之发送QQ邮件
  • (十三)Java springcloud B2B2C o2o多用户商城 springcloud架构 - SSO单点登录之OAuth2.0 根据token获取用户信息(4)...
  • (已解决)报错:Could not load the Qt platform plugin “xcb“
  • (转)母版页和相对路径
  • (转)详解PHP处理密码的几种方式
  • .apk文件,IIS不支持下载解决
  • .describe() python_Python-Win32com-Excel