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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 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 面试碰到过的问题 在此做下记录
2011/06/09 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
javascript闭包入门示例
2014/04/30 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
python中sets模块的用法实例
2014/09/30 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
python制作朋友圈九宫格图片
2019/11/03 Python
详解python中docx库的安装过程
2019/11/08 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
群众路线党课主持词
2014/04/01 职场文书
高中班主任评语
2014/12/30 职场文书
2015新学期家长寄语
2015/02/26 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
责任书范本大全
2015/05/11 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
Django drf请求模块源码解析
2021/06/08 Python
node快速搭建后台的实现步骤
2022/02/18 NodeJs
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android