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 相关文章推荐
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
Javascript 面试题随笔
Mar 31 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
vue获取form表单的值示例
Oct 29 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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实现Session入库/存入redis的方法
2017/05/04 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
python uuid模块使用实例
2015/04/08 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
伊琍体标语
2014/06/25 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
iPhone13再次曝光
2021/04/15 数码科技
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS