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绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 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
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python字符串处理实例详解
2017/05/18 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
使用python实现学生信息管理系统
2021/02/25 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
会务接待方案
2014/02/27 职场文书
生产车间标语
2014/06/11 职场文书
日语系毕业求职信
2014/07/27 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript