Sample code for two methods of map function in jQuery

本文给大家分享jquery中map函数的两种方式，非常不错，具有参考借鉴价值，需要的朋友参考下吧

两种方式：

1、直接jQuery.map

//将原数组中每个元素加 4 转换为一个新数组。
$.map( [0,1,2], function(n){
 return n + 4;
});
//结果:
[4, 5, 6]
//原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组
$.map( [0,1,2], function(n){
 return [ n, n + 1 ];
});
//结果:
[0, 1, 1, 2, 2, 3]

2、遍历对象.map

例子：

<form method="post" action="">
 <fieldset>
  <p>
   <label for="two">2</label>
   <input type="checkbox" value="2" id="two" name="number[]">
  </p>
  <p>
   <label for="four">4</label>
   <input type="checkbox" value="4" id="four" name="number[]">
  </p>
  <p>
   <label for="six">6</label>
   <input type="checkbox" value="6" id="six" name="number[]">
  </p>
  <p>
   <label for="eight">8</label>
   <input type="checkbox" value="8" id="eight" name="number[]">
  </p>
 </fieldset>
</form>
$(&#39;:checkbox&#39;).map(function() {
 return this.id;
}).get().join(&#39;,&#39;);

结果：two,four,six,eight

解析：

map（）的功能主要有两步， 第一步就是遍历，第二步就是替换 。

$( " li " ).map( function(){
return $(this).text(); // 注意return关键字不可少
})

map先遍历，每一项都返回一个text（）值 ，然后map会将这些值自动去替换$("li")集合的每一项值，所以 这个时候还是个类数组（因为还是$(" li ")的壳子），不是个真正的数组 。于是后面加个get（）操作就变成真正的数组了，于是可以用join（）这样专属于数组的方法。

The above is the detailed content of Sample code for two methods of map function in jQuery. For more information, please follow other related articles on the PHP Chinese website!