举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > jquery 遍历map jQuery 遍历 - map() 方法

jquery 遍历map jQuery 遍历 - map() 方法

2023-03-15 03:31 jQuery教程

jquery 遍历map jQuery 遍历 - map() 方法

jquery 遍历map

jQuery 是一个 JavaScript 库,它提供了一种简单的方法来遍历 map。map 是一种数据结构,它由键和值组成,其中键是唯一的,而值可以是任何数据类型。使用 jQuery 遍历 map 的方法有两种:使用 $.each() 函数或使用 $.map() 函数。

$.each() 函数可以用来遍历 map 中的所有元素。它接受两个参数:要遍历的 map 和一个回调函数。回调函数会在每次迭代时被调用,并接受当前迭代的键和值作为参数。例如:

var myMap = {
    "key1": "value1", 
    "key2": "value2" 
}; 
$.each(myMap, function(key, value) { 
    console.log(key + " : " + value); 
}); 
// 输出: key1 : value1 key2 : value2 

$.map() 函数也可以用来遍历 map。它也接受两个参数:要遍历的 map 和一个回调函数。但是不同于 $.each() ,$.map() 返回一个新的 map (或者说是新的对象),其中包含了回调函数处理后的所有元素。例如:

 
var myMap = { 
    "key1": "value1", 
    "key2": "value2" 
};  
var newMap = $.map(myMap, function(value, key) {   return key + "_" + value; });   console.log(newMap);   // 输出: ["key1_value1", "key2_value2"]   

jQuery 遍历 - map() 方法

jQuery 遍历参考手册

实例

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

$("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,则不会插入任何元素。

jQuery 遍历参考手册

阅读全文
以上是鳄鱼CMS为你收集整理的jquery 遍历map jQuery 遍历 - map() 方法全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们