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语言本身谈项目实战
Dec 27 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 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中的函数嵌套层数限制分析
2011/06/13 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
JavaScript 特殊字符
2007/04/05 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python使用正则筛选信用卡
2019/01/27 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python实现AdaBoost算法的示例
2020/10/03 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
我的小天地教学反思
2014/04/30 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
单位工作证明范本
2015/06/15 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书