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中的面向对象介绍
Jun 30 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
vue代理和跨域问题的解决
Jul 18 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
vue cli3适配所有端方案的实现
2020/04/13 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
python线程池threadpool实现篇
2018/04/27 Python
python如何获取apk的packagename和activity
2020/01/10 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
趣味比赛活动方案
2014/02/15 职场文书
学生请假条格式
2014/04/11 职场文书
大学班级学风建设方案
2014/05/01 职场文书
春季防火方案
2014/05/10 职场文书
公司股东出资证明书
2014/11/01 职场文书
李白故里导游词
2015/02/12 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
党内外群众意见范文
2015/06/02 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
nginx配置之并发频次限制
2022/04/18 Servers