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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
详解jquery和vue对比
Apr 16 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery实现弹幕特效
Nov 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
用PHP开发GUI
2006/10/09 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
建筑工程专业毕业生自荐信
2013/10/19 职场文书
英语感恩演讲稿
2014/01/14 职场文书
仓库主管岗位职责
2014/03/02 职场文书
《桥》教学反思
2014/04/09 职场文书
施工安全承诺书
2014/05/22 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
仓管员岗位职责
2015/02/03 职场文书
见习期个人总结
2015/03/05 职场文书
个人欠条范本
2015/07/03 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis