Jquery $.map使用方法实例详解


Posted in jQuery onSeptember 01, 2020

$.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。

注意:

1. 在jQuery 1.6 之前,该函数只支持遍历数组;从 1.6 开始,该函数也支持遍历对象。

2. map()还会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。

3. 该函数返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。

$.map(data,function(item,index){return XXX})

遍历data数组中的每个元素,并按照return中的计算方式 形成一个新的元素,放入返回的数组中

var b = $.map( [55,1,2], function( item,index ) { return { "label": item, "value": index }});
            alert(b[0].label +" "+ b[0].value);

[55,1,2]是一个数组,按照return的条件,,,,function 中的item,为55时,index也就是数组的下标就为0

$.map()括号中就相当于一个循环

循环多条数据,把数据定义为b

var array = [0, 1, 52, 97];
array = $.map(array, function(a, index) {
 return [a - 45, index];
});

输出为:

[-45, 0, -44, 1, 7, 2, 52, 3]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 #jQuery
jQuery实现动态加载瀑布流
Sep 01 #jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 #jQuery
jQuery编写QQ简易聊天框
Aug 27 #jQuery
jQuery实现简单QQ聊天框
Aug 27 #jQuery
You might like
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
星球大战与Python之间的那些事
2016/01/07 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
Python3实现飞机大战游戏
2020/04/24 Python
Django admin组件的使用
2020/10/24 Python
python实现学生通讯录管理系统
2021/02/25 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
公务员职业生涯规划书范文  
2014/01/19 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript