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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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之第六天
2006/10/09 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python检测数据类型的方法总结
2019/05/20 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
毕业生自荐信的主要内容
2013/10/29 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
5.12护士节活动总结
2015/02/10 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js