`
uule
  • 浏览: 6351674 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

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>
    <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>

 

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

 结果:two,four,six,eight

 

 

解析:

map()的功能主要有两步,第一步就是遍历,第二步就是替换

 

$( " li " ).map( function(){

    return  $(this).text();  // 注意return关键字不可少

})

 

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

 

分享到:
评论

相关推荐

    jquery中map函数遍历数组用法实例

    如果数组元素是对象,那么map函数的回调函数中的item将会是对象,而非基本类型数据,这可能不符合map函数的预期使用场景。 此外,文档中还介绍了一个自定义的遍历数组函数MyMap,它是直接使用原生JavaScript实现的...

    jQuery中map函数的两种方式

    本文将介绍jQuery中map函数的两种使用方式。 第一种方式是直接使用jQuery.map()函数处理数组。这种方式允许开发者直接传递一个数组和一个回调函数,回调函数会对数组中的每一个元素执行,并返回一个新的值。这些...

    Jquery中map函数的用法

    jQuery中的map函数是一个非常有用的工具,它允许开发者对jQuery对象集中的每个元素执行一个函数,并将该函数的返回值组成一个新数组。这个函数的功能非常强大,可以用于多种不同的场景。 首先,我们来理解一下...

    jquery中map函数与each函数的区别实例介绍

    jQuery是目前最流行的JavaScript库之一,它提供了许多方便开发者操作DOM的函数,其中each和map函数就是用于处理数组和对象集合的两个非常有用的函数。在对数组或对象集合进行遍历操作时,初学者可能会对这两个函数的...

    jquery-3.2.1.min.map官网最新下载

    总结来说,jQuery 3.2.1.min.map文件是前端开发中的一个重要工具,它允许我们在享受压缩代码带来的性能提升的同时,不失调试的便利性。了解并善用源映射,可以帮助我们更高效地解决在使用压缩过的jQuery库时遇到的...

    Jquery插件-通用基本函数

    Jquery Map Request DIV居中 Windows /** * MAP拥有JAVA HashMap函数基本特性 * @Attribute datas 数据源 * @Attribute size 数据长度 * @Function containsKey(key) 判断KEY是否存在 * @Function contains...

    jQuery的Ajax实现异步传输List、Map

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下与服务器进行数据交换,极大地提升...

    jquery快捷键插件mapkey

    3. **初始化插件**:在jQuery的`$(document).ready()`函数中,调用MapKey的初始化方法,设置快捷键。 ```javascript $(document).ready(function() { $.mapkey({ // 配置快捷键 keys: { 'ctrl+a': function() {...

    JQuery各Ajax函数说明

    ### JQuery中的Ajax函数详解 #### 一、$.get() **函数定义**: ```javascript $.get(url, [data], [callback]) ``` **说明**: `$.get()` 是 jQuery 提供的一个用于发起 GET 请求的简便函数。它允许你向服务器...

    jQuery 遍历map()方法详解

    map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。 二、语法 .map(callback(index,domElement)) 三、详细说明 由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以...

    jquery3.6.0.min.js+min.map.7z

    本文将深入探讨"jquery3.6.0.min.js"和"jquery-3.6.0.min.map"这两个文件在jQuery 3.6.0版本中的关键知识点。 首先,我们来看"jquery3.6.0.min.js"。这是一个经过压缩和优化的jQuery核心库文件。"min"代表"minified...

    jQuery中map()方法用法实例

    需要注意的是,在使用map()方法时,返回的数组并不一定是元素数组,它完全可以是字符串、数字或其他类型的值,这完全取决于map函数内部的逻辑。 通过上述内容,可以总结出jQuery的map()方法是处理元素集合,并将...

    纯jquery+css绘画地图线路图插件Subway Map

    1. **引入依赖**:在HTML文件中引入jQuery库和Subway Map插件的JS文件。 2. **准备数据**:定义地图线路和站点的数据结构,通常是一个JSON对象或数组。 3. **初始化插件**:使用jQuery选择器选取容器元素,并调用`...

    jQuery函数map()和each()介绍及异同点分析

    其次,map()方法在回调函数中返回的值会被包含在新的数组中,而each()方法则通常用于执行操作而不返回新数组。再者,map()有可能造成内存浪费,尤其是当回调函数返回的值不会被使用时。总的来说,each()更偏向于执行...

    基于jquery循环map功能的代码

    在JavaScript编程中,jQuery库提供了一种方便的方式来处理数据结构,比如循环遍历Map对象。在给定的标题和描述中,我们关注的核心是使用jQuery的`$.each()`方法来迭代Map对象。jQuery的`$.each()`函数是一个非常实用...

Global site tag (gtag.js) - Google Analytics