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

方法语法：map()

map(callback)
为包装集中的每一个元素调用回调函数，并将返回值收集到jQuery对象的实例中。
参数
callback （函数）回调函数，为包装集中的每个元素调用该函数。
比如，下面的代码将页面上所有div元素的id值收集到一个javascript数组中：

代码如下:

var iDs = $("div").map(function(){
    return (this.id==undefined) ? null :this.id;
}).get();

再看如下的表单中包含的一组 checkbox 框：

代码如下:

<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="text" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>

我们可以得到一个用逗号分隔的复选框 ID:

代码如下:

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

此调用的结果是字符串， "two,four,six".

在回调函数中，this指向每次迭代中的当前DOM元素。

方法语法：each()

each(iterator)
遍历匹配集里所有的元素，为每一个元素调用传入的迭代函数
iterator （函数）回调函数，为匹配集中的每个元素调用
each()方法也可以用来遍历javascript数组对象甚至单个对象，举个栗子：

代码如下:

$([a,b,c,d]).each(function(){
    alert(this);
})

这个语句会为传入$()中数组的每个元素调用迭代函数，函数中的this指向单独的数组项。

每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。

假设页面上有这样一个简单的无序列表。

代码如下:

<ul>
<li>foo</li>
<li>bar</li>
</ul>

你可以选中并迭代这些列表：

代码如下:

$( "li" ).each(function( index ) {
console.log( index + ": "" + $(this).text() );
});

列表中每一项会显示在下面的消息中：

0: foo
1: bar
两者的区别

map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。

each()返回的是原来的数组，并不会新创建一个数组。
map()方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。

赞 (0)

相关推荐

  • jquery的map与get方法详解

    复制代码 代码如下: var arrayObj=["www","xxx","ddd"];var ww=$.map(arrayObj,function(i){                      return i;              }).join(",");console.log(ww); var tt=$(":checkbox").map(function(){               

  • jQuery遍历json中多个map的方法

    本文实例讲述了jQuery遍历json中多个map的方法.分享给大家供大家参考.具体实现方法如下: jQuery.each(data.root,function(key,value){ for(var i = 0 ; i < value.length; i++ ){ var tmpArr = []; var obj = value[i]; //tmpArr.push(obj["collectDate"]); tmpArr.push(3*i); tmpArr.push(obj[&q

  • jQuery地图map悬停显示省市代码分享

    jQuery地图map悬停显示省市代码分享

    这是一款基于jQuery实现地图map悬停显示省市代码,这样一个神奇的地图便于我们更好地了解中国,增加自己的地理知识. 下面是效果图是不是很棒. 效果演示 源码下载 为大家分享的jQuery地图map悬停显示省市代码如下 <head> <meta charset="utf-8"> <title>jQuery地图map悬停显示省市代码</title> <script src="js/lib/jquery-1.11.1.min

  • jQuery 遍历map()方法详解

    一.定义和用法 map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象. 二.语法 .map(callback(index,domElement)) 三.详细说明 由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组 四.案例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>

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

    ​jquery中的each函数和map函数的用法看起来差不多,但其实还是有一点区别的. ​其中一个重要的区别是,each返回的是原来的数组,并不会新创建一个数组.而map方法会返回一个新的数组.如果在没有必要的情况下使用map,则有可能造成内存浪费. ​例如: var items = [1,2,3,4]; $.each(items, function() { alert('this is ' + this); }); var newItems = $.map(items, function(i)

  • jQuery中map()方法用法实例

    本文实例讲述了jQuery中map()方法用法.分享给大家供大家参考.具体分析如下: 此方法将一组元素转换成其他数组(不论是否是元素数组). 可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式. 语法结构: 复制代码 代码如下: $("selector").map(function) 参数列表: 参数 描述 function 给每个元素执行的函数 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <h

  • jquery.map()方法的使用详解

    原型方法map跟each类似调用的是同名静态方法,只不过返回来的数据必须经过另一个原型方法pushStack方法处理之后才返回,源码如下: map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); }, 本文主要就是分析静态map方法至于pushStack在下一篇随笔里面分析: 首先了解下

  • jquery与google map api结合使用 控件,监听器

    Google Maps JavaScript. API可以让您在自己的网页上使用Google地图.在使用API之前,您应该先申请一 个API key,申请API key请到:http://code.google.com/apis/maps/signup.html.这里假设你获取到的key是:ABQIAA. 关于jquery的获取不再此处累赘,网上有许多关于jquery的介绍. 接着我们就使用JQuery和Google Maps JavaScript. API来结合表现一下google map的有

  • 基于jquery循环map功能的代码

    废话少说,看代码 复制代码 代码如下: var map = { 地名: ["北京","天津","上海"], 民族: ["汉族","藏族","维吾尔族"] }; $.each(map,function(key,values){ console.log(key); $(values).each(function(){ console.log("\t" + this); }

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

    本文实例讲述了jquery中map函数遍历数组用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

随机推荐