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 相关文章推荐
Extjs学习笔记之七 布局
Jan 08 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
关于vue-router的那些事儿
May 23 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
第十一节 重载 [11]
2006/10/09 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
详解a++和++a的区别
2017/08/30 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
js实现盒子移动动画效果
2020/08/09 Javascript
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python中的逆序遍历实例
2019/12/25 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
中海讯通笔试题
2015/09/15 面试题
仓库规划计划书
2014/04/28 职场文书
红歌会主持词
2015/07/02 职场文书
python本地文件服务器实例教程
2021/05/02 Python
python 算法题——快乐数的多种解法
2021/05/27 Python