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实现多级菜单效果
Jul 25 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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里得到前天和昨天的日期的代码
2007/08/16 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
如何唤起类中的一个方法
2013/11/29 面试题
大学学习个人的自我评价
2014/02/18 职场文书
优秀员工获奖感言
2014/03/01 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Python作用域和名称空间的详细介绍
2022/04/13 Python