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编写textarea输入字数限制代码
Mar 23 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现简单评论功能
Aug 19 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP Token(令牌)设计
2008/03/15 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python提取网页中超链接的方法
2016/09/18 Python
Python批量更改文件名的实现方法
2017/10/29 Python
分析Python中解析构建数据知识
2018/01/20 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
python中元组的用法整理
2020/06/15 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
一套PHP的笔试题
2013/05/31 面试题
学校四风对照检查材料
2014/08/28 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
小学生优秀评语
2014/12/29 职场文书
教师创先争优承诺书
2015/04/27 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
python 实现体质指数BMI计算
2021/05/26 Python