您现在的位置: 365建站网 > 建站教程 > jQuery 教程 > jQuery 遍历 - map() 方法

jQuery 遍历 - map() 方法

此节有 254 人学习过     参与评论

实例

构建表单中所有值的列表:

</>code

  1. $("p").append( $("input").map(function(){
  2. return $(this).val();
  3. }).get().join(", ") );

亲自试一试

定义和用法

map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。

语法

</>code

  1. .map(callback(index,domElement))
参数 描述
callback(index,domElement) 对当前集合中的每个元素调用的函数对象。

详细说明

由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。

.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单:

</>code

  1. <form method="post" action="">
  2. <fieldset>
  3. <div>
  4. <label for="two">2</label>
  5. <input type="checkbox" value="2" id="two" name="number[]">
  6. </div>
  7. <div>
  8. <label for="four">4</label>
  9. <input type="checkbox" value="4" id="four" name="number[]">
  10. </div>
  11. <div>
  12. <label for="six">6</label>
  13. <input type="checkbox" value="6" id="six" name="number[]">
  14. </div>
  15. <div>
  16. <label for="eight">8</label>
  17. <input type="checkbox" value="8" id="eight" name="number[]">
  18. </div>
  19. </fieldset>
  20. </form>

我们能够获得复选框 ID 组成的逗号分隔的列表:

</>code

  1. $(':checkbox').map(function() {
  2. return this.id;
  3. }).get().join(',');

亲自试一试

本次调用的结果是字符串:"two,four,six,eight"。

在 callback 函数内部,this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项,或者是要被插入结果集中的数据项的数组。如果返回的是数组,数组内的元素会被插入集合中。如果函数返回 null 或 undefined,则不会插入任何元素。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (254人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------
jQuery 教程目录

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号