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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery实现开关灯效果
Aug 02 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 强制下载文件代码
2010/10/24 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
使用TensorFlow实现SVM
2018/09/06 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
浅谈python常用程序算法
2019/03/22 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python3实现高效的端口扫描
2019/08/31 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
财务方面个人工作的自我评价
2013/12/28 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
中学教师师德承诺书
2014/05/23 职场文书
中秋节祝酒词
2015/08/12 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书