jQuery中map函数的两种方式


Posted in jQuery onApril 07, 2017

两种方式:

1、直接jQuery.map

//将原数组中每个元素加 4 转换为一个新数组。
$.map( [0,1,2], function(n){
 return n + 4;
});
//结果:
[4, 5, 6]
//原数组中每个元素扩展为一个包含其本身和其值加 1 的数组,并转换为一个新数组
$.map( [0,1,2], function(n){
 return [ n, n + 1 ];
});
//结果:
[0, 1, 1, 2, 2, 3]

2、遍历对象.map

例子:

<form method="post" action="">
 <fieldset>
  <div>
   <label for="two">2</label>
   <input type="checkbox" value="2" id="two" name="number[]">
  </div>
  <div>
   <label for="four">4</label>
   <input type="checkbox" value="4" id="four" name="number[]">
  </div>
  <div>
   <label for="six">6</label>
   <input type="checkbox" value="6" id="six" name="number[]">
  </div>
  <div>
   <label for="eight">8</label>
   <input type="checkbox" value="8" id="eight" name="number[]">
  </div>
 </fieldset>
</form>
$(':checkbox').map(function() {
 return this.id;
}).get().join(',');

结果:two,four,six,eight

解析:

map()的功能主要有两步, 第一步就是遍历,第二步就是替换 。

$( " li " ).map( function(){
return $(this).text(); // 注意return关键字不可少
})

map先遍历,每一项都返回一个text()值 ,然后map会将这些值自动去替换$("li")集合的每一项值,所以 这个时候还是个类数组(因为还是$(" li ")的壳子),不是个真正的数组 。于是后面加个get()操作就变成真正的数组了,于是可以用join()这样专属于数组的方法。

以上所述是小编给大家介绍的jQuery中map函数的两种方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
jQuery自定义图片上传插件实例代码
Apr 04 #jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 #jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 #jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 #jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 #jQuery
You might like
监控 url fragment变化的js代码
2010/04/19 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
python生成ppt的方法
2018/06/07 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
写给女朋友的道歉信
2014/01/12 职场文书
自我介绍演讲稿
2014/01/15 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
合同范本之电脑出租
2019/08/13 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python