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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
PHP mail()函数使用及配置方法
2014/01/14 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
简述vue中的config配置
2018/01/23 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
使用python编写监听端
2018/04/12 Python
python pygame实现方向键控制小球
2019/05/17 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
python3处理word文档实例分析
2020/12/01 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
保护动物倡议书
2014/04/15 职场文书
公司年终奖分配方案
2014/06/16 职场文书
公司离职证明标准格式
2014/11/18 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang