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 miscellanea -display data real time, using window.status
Jan 09 Javascript
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
require.js的用法详解
Oct 20 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
浅谈JS函数节流防抖
Oct 18 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
12 种使用Vue 的最佳做法
Mar 30 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中的时间显示
2007/01/18 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
javascript下string.format函数补充
2010/08/24 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
nodejs基础知识
2017/02/03 NodeJs
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
python opencv实现运动检测
2018/07/10 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
python读文件的步骤
2019/10/08 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
几款好用的python工具库(小结)
2020/10/20 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
Yahoo-PHP面试题2
2014/12/06 面试题
你常见到的runtime exception
2016/09/05 面试题
大学生毕业自我评价范文分享
2013/11/07 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
升学宴主持词
2014/04/02 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
软环境建设心得体会
2014/09/09 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
2016中秋节广告语
2016/01/28 职场文书
靠谱准确的求职信
2019/04/02 职场文书