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中封装函数传递当前元素的方法示例
May 05 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
javascript multibox 全选
2009/03/22 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python获取当前计算机cpu数量的方法
2015/04/18 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
python去除字符串中的换行符
2017/10/11 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
python高级特性简介
2020/08/13 Python
我心目中的好老师活动方案
2014/08/19 职场文书
合伙购房协议样本
2014/10/06 职场文书
2014年党员整改措施
2014/10/24 职场文书
观看建国大业观后感
2015/06/01 职场文书
入党函调证明材料
2015/06/19 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
Django显示可视化图表的实践
2021/05/10 Python