🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# jQuery 遍历 - 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,则不会插入任何元素。