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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
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
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
php上传文件常见问题总结
2015/02/03 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
js 替换
2008/02/19 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python调用API实现智能回复机器人
2018/04/10 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
介绍一下grep命令的使用
2015/06/12 面试题
卫校毕业生自我鉴定
2013/10/31 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
滴水洞导游词
2015/02/10 职场文书
2015年父亲节寄语
2015/03/23 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server