【jQuery 遍历】 - map() 方法
构建表单中所有值的列表：
$("p").append( $("input").map(function(){return $(this).val();}).get().join(", ") );
<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://w3school.com.cn/"/>
</form>
<script>
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
</script>
</body>
</html>
定义和用法
map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
语法
.map(callback(index,domElement))
参数 描述
callback(index,domElement) 对当前集合中的每个元素调用的函数对象。
详细说明
由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单：
<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="checkbox" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>
我们能够获得复选框 ID 组成的逗号分隔的列表：
$(':checkbox')
.map(function() {
return this.id;
})
.get().join(',');
<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="checkbox" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>
<p><b>Values: </b></p>
<script>
$("p").append($(':checkbox').map(function() {
return this.id;
}).get().join(','));
</script>
</body>
</html>
【jQuery 遍历】 - map() 方法相关推荐
- html遍历map,jQuery 遍历map()方法详解
一.定义和用法 map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象. 二.语法 .map(callback(index,domElement)) 三.详细说明 ...
- jQuery中map方法
jQuery的map方法可以遍历数组,也可以遍历伪数组 $(function(){var arr=[1,2,34,]var fakeArray = {length: 3,"0": ...
- jquery遍历多个li_21个jQuery遍历节点方法详解
本篇教程介绍了21个jQuery遍历节点方法详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 1.children()方法:$('div').children( ...
- java+getactionmap_Struts2 使用OGNL遍历map方法详解
一.Action中的代码:MapAction.java package com.zx.demo.action; import java.util.ArrayList; import java.util ...
- C++遍历map方法
C++遍历map方法 C++中访问容器需要使用迭代器,而非下标. c++98 map<string, int>::iterator it;for (it = m2.begin(); it ...
- jQuery 遍历 - closest() 方法
jQuery 遍历参考手册 实例 本例演示如何通过 closest() 完成事件委托.当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景: $( document ).bind("c ...
- jQuery 遍历 - children() 方法
jQuery 遍历参考手册 实例 找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色: $("div").children(" ...
- html遍历map,forEach()方法遍历map()方法数组遍历
1.forEach()方法//以前遍历的方法 var arr = ['苹果','西瓜','香蕉','芒果']; for (var i=0;i console.log(arr[i]); } //forE ...
- jQuery 遍历 - slice() 方法
实例 选中所有段落,然后将所选内容缩减为只包含第一和第二个段落: .slice(0, 2) 亲自试一试 定义和用法 slice() 把匹配元素集合缩减为指定的指数范围的子集. 语法 .slice(se ...
- js 字符串切割 split方法 遍历map方法
split: var str='123456';console.log(str.split(''))// 打印数据 ["1","2","3" ...
最新文章
- YOLOv5的pytorch模型文件转换为ONNX文件
- 数据库---闭包习题
- Android的消息处理机制——Looper,Handler和Message浅析
- APK加密方法：某社交类Android APP加密分享
- 怎么邀请人加入组队_糖豆人：终极淘汰赛怎么玩？玩法技巧介绍
- mysql是gplv3,Affero-GPL和GPLv3之间的区别
- 【Java】基于IDE的JUnit软件测试入门
- java质数和合数的程序_《java项目实训》课程设计计算器.doc
- 10个大数据领域的杰出公司
- java中有哪几种访问修饰符_Java语言中有4种访问修饰符
- jquery中ajax应用中的通用ajax()函数
- 开课吧课程:成为全栈工程师的好处有哪些？
- editorloop 占用_【交换机在江湖-维护无忧系列】CPU占用率高故障专题（3）-常见故障案例...
- linux服务器如何进入图形界面,linux进入图形界面的方法
- VSCODE + 搜狗输入法，文字突然变成了繁体字，为什么？
- win10 internet 信息服务器,Win10无internet访问权限怎么解决？Win10无网络解决方法
- 大漠穷秋：如何快速构建一款SCRM小程序？
- 计算机科学的发展表情包,表情包发展简史
- 启用计算机的无线同屏,win10系统无线同屏功能如何使用
- BZOJ 2006超级钢琴
热门文章
- NUC1014 排版题.输出排列成菱形的字母【打印图案】
- np.unique 的实现
- TensorFlow 辨异 —— tf.add(a, b) 与 a+b（tf.assign 与 =）、tf.nn.bias_add 与 tf.add
- 新技能 get —— Python 断点续传下载文件
- σ 代数与测度（measures）
- 趣学 C 语言（四）—— 字符串与字符数组
- leetcode（二）—— Add Two Numbers（Python/C++）
- 机器学习基础（三十） —— 线性回归、正则化（regularized）线性回归、局部加权线性回归（LWLR）
- acl在内核里的位置_在Linux中使用ACL（访问控制列表）保护文件/目录
- python def函数参数_Python def函数的定义、使用及参数传递实现代码