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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现简单三级联动效果
Sep 05 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中{}大括号是什么意思
2013/12/01 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
Python 初始化多维数组代码
2008/09/06 Python
python列表与元组详解实例
2013/11/01 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
python矩阵的转置和逆转实例
2018/12/12 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
keras中的History对象用法
2020/06/19 Python
想学画画?python满足你!
2020/12/24 Python
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
集体备课反思
2014/02/12 职场文书
班级德育工作实施方案
2014/02/21 职场文书
出纳会计岗位职责
2014/03/12 职场文书
班级出游活动计划书
2014/08/15 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
党支部半年考察意见
2015/06/01 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书