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实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jquery更改元素属性attr()方法操作示例
May 22 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/06/18 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
简单三步,搞掂内存泄漏
2007/03/10 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
jQuery操作css样式
2017/05/15 jQuery
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
Python定时执行之Timer用法示例
2015/05/27 Python
python语言使用技巧分享
2016/05/31 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
舞蹈教育学专业推荐信
2013/11/27 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
暂住证证明
2015/06/19 职场文书
比赛口号霸气押韵
2015/12/24 职场文书