jQuery 遍历map()方法详解


Posted in Javascript onNovember 04, 2016

一、定义和用法

map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。

二、语法

.map(callback(index,domElement))

三、详细说明

由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组

四、案例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery map</title>
<script language="javascript" src="../jquery-1.11.1.js"></script>
<script language="javascript">
 $(function(){
 
 //map 遍历数组
 var str = $.map([1, 2, 3], function(n){
 //console.log(n);
 return n;
 }).join();
 //
 console.log(str);
 
 //
 var data = $('#list li').map(function(){
 //console.log($(this).attr('id'));
 return $(this).attr('id');
 }).get().join();
 
 console.log(data);
 });
</script>
</head>
<body>
 
 <div>
  <ul id="list">
   <li id="li1">列表1</li>
   <li id="li2">列表2</li>
   <li id="li3">列表3</li>
   <li id="li4">列表4</li>
   <li id="li5">列表5</li>
  </ul>
 </div>
 
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Sortable.js拖拽排序使用方法解析
Nov 04 #Javascript
jQuery图片加载显示loading效果
Nov 04 #Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 #Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 #Javascript
简单学习vue指令directive
Nov 03 #Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 #Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 #Javascript
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
用脚本调用样式的几种方法
2006/12/09 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
深入理解python中的atexit模块
2017/03/07 Python
基于python实现聊天室程序
2018/07/27 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python获取txt文件词向量过程详解
2019/07/05 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
住房公积金接收函
2014/01/09 职场文书
单位实习证明怎么写
2014/01/17 职场文书
小学学校评估方案
2014/06/08 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
法人授权委托书
2014/09/16 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
开会通知
2015/04/20 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL