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 相关文章推荐
使用正则替换变量
May 05 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 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之第八天
2006/10/09 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
window.location.hash 使用说明
2010/11/08 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
layui表格实现代码
2017/05/20 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python把转列表为集合的方法
2019/06/28 Python
基于python实现把图片转换成素描
2019/11/13 Python
Python识别处理照片中的条形码
2020/11/16 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
护士的自我鉴定
2014/02/07 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
残疾人小组计划书
2014/04/27 职场文书
产品调价通知函
2015/04/20 职场文书
离婚代理词范文
2015/05/23 职场文书
企业法人任命书
2015/09/21 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
html5调用摄像头实例代码
2021/06/28 HTML / CSS
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
Docker官方工具docker-registry案例演示
2022/04/13 Servers