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插件之validation插件
Mar 29 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 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 pack与unpack 摸板字符字符含义
2009/10/29 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
js控制随机数生成概率代码实例
2019/03/21 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python中list列表的高级函数
2016/05/17 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
九州传奇上机题
2014/07/10 面试题
银行实习人员自我鉴定
2013/09/22 职场文书
后勤人员自我鉴定
2013/10/20 职场文书
学生安全承诺书
2014/05/22 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
居安思危观后感
2015/06/11 职场文书