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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
javascript中scrollTop详解
Apr 13 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 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 serialize()与unserialize()的用法
2013/06/05 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
JS 修改URL参数(实现代码)
2013/07/08 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
详解JavaScript的变量
2019/04/04 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python实现微信小程序自动回复
2018/09/10 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
后勤岗位职责
2013/11/26 职场文书
物流专员岗位职责
2014/02/17 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript