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 03 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
destoon复制新模块的方法
2014/06/21 PHP
php文件下载处理方法分析
2015/04/22 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
推荐20家国外的脚本下载网站
2011/04/28 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
python实现梯度下降法
2020/03/24 Python
python高级特性简介
2020/08/13 Python
html5 标签
2009/07/16 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
实习鉴定评语
2014/01/19 职场文书
党员政治学习材料
2014/05/14 职场文书
五四青年节演讲稿
2014/05/26 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
高三复习计划
2015/01/19 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript