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插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery实现简单评论功能
Aug 19 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
js实时监听文本框状态的方法
2011/04/26 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
Move.js入门
2017/02/08 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
vue实现登录拦截
2020/06/29 Javascript
Python编程argparse入门浅析
2018/02/07 Python
Python中collections模块的基本使用教程
2018/12/07 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
车间机修工岗位职责
2014/02/28 职场文书
优秀广告词大全
2014/03/19 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
理想国读书笔记
2015/06/25 职场文书
《藏戏》教学反思
2016/02/23 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
Python学习之包与模块详解
2022/03/19 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android