欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery 遍历 - map() 方法使用【转】

程序员文章站 2022-06-25 08:29:17
实例 构建表单中所有值的列表: ~~~ $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); ~~~ "亲自试一试" 定义和用法 map() 把每个元素通过函数传递到当前匹配集合中 ......

实例

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

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

定义和用法

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(',');

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

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

文章转自:
更多例子参考: