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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 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解答方法
2012/02/04 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
PHP递归的三种常用方式
2019/02/28 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python学习基础之循环import及import过程
2018/04/22 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
python 下载文件的几种方法汇总
2021/01/06 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
应届生财务管理求职信
2013/11/06 职场文书
甜品店创业计划书
2014/08/14 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
开除员工通知
2015/04/22 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
公司费用报销管理制度
2015/08/04 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python