jQuery函数map()和each()介绍及异同点分析
更新时间：2014年11月08日 16:47:44 投稿：hebedich
这篇文章主要介绍了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，则有可能造成内存浪费。
相关文章
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
最近做一个AJAX的GridView来显示数据，当然按照现在流行的首选是Jquery。2010-04-04
这篇文章主要介绍了jQuery操作DOM，下面的DOM操作将围绕上面的DOM树进行学习JQueryDOM操作，有兴趣的可以了解一下2017-07-07
总结了一下了一下$.getJSON()一些应用，希望大家喜欢，首先我用的的是 Newtonsoft.Json.Net20.dll2011-01-01
本文主要是给大家分享了一则使用EasyUI实现同步树的代码，主要是使用递归实现，非常实用的方法，推荐给小伙伴们。2015-03-03
这篇文章主要介绍了jquery.picsign 自己封装的第一个开源组件,需要的朋友可以参考下2018-02-02
虽然前面已经写过两篇关于DivAlert的随笔了，也已经实现了我的需求，但是今天发现很多jQuery插件代码中都使用了extend方法，这样确实让默认设置的代码减少了许多。2010-04-04
这篇文章主要介绍了jquery简单倒计时实现方法,涉及jQuery定时函数操作及日期与实现的运算技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
本篇文章主要是对jquery中get和post的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且，jqPlot具有插件可扩展性(Pluggability)，你可以编写自己的图表样式。2011-04-04
在《弹出层之1：JQuery.Boxy (一)》中讲到了JQuery.Boxy的基本用法，本次讲下手动创建实例，new一个boxy对象是很容易的，传递一些参数对象就能满足不同的需求了。2011-10-10
最新评论