jquery中.map与each的区别?
4个回答
展开全部
一、功能不同
1、map:用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。
2、each:为每个匹配元素规定要运行的函数。
二、传递参数不同
1、map:会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。
2、each: 会为函数传入两个参数:其一是选择器的 index 位置。其二是当前的元素。
三、返回值不同
1、map:返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。
2、each:返回 false 可用于及早停止循环。
参考资料来源:百度百科-each
参考资料来源:百度百科-Map
展开全部
$.map()方法适用于将数组或对象每个项目新阵列映射到一个新数组的函数
作为返回值是一个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".在回调函数中,this指的是每次迭代当前DOM元素。该函数可以返回一个单独的数据项目或数据项的数组并在结果集合中插入。如果数组返回,数组中的元素插入到集合。如果函数返回null或undefined ,没有元素将被插入。
.each() 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。更重要的是,回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。
假设页面上有这样一个简单的无序列表。
<ul>
<li>foo</li>
<li>bar</li>
</ul>
我们可以选中并迭代这些列表:
$('li').each(function(index) {
alert(index + ': ' + $(this).text());
});
列表中每一项会显示在下面的消息中:
0: foo1: bar
$.each()函数和.each()是不一样的,这个是专门用来遍历一个jQuery对象。$.each()函数可用于迭代任何集合,无论是“名/值”对象(JavaScript对象)或阵列。在一个数组的情况下,回调函数每次传递一个数组索引和相应的数组值。(该值也可以通过访问this关键字,但是JavaScript将始终包裹this值作为一个Object ,即使它是一个简单的字符串或数字值。)该方法返回其第一个参数,这是迭代的对象。
$.each([52, 97], function(index, value) {
alert(index + ': ' + value);
});
这将产生两个信息:
0: 521: 97
如果对象是作为集合使用,回调函数每次传递一个键值对的:
var map = {
'flammable': 'inflammable',
'duh': 'no duh'
};
$.each(map, function(key, value) {
alert(key + ': ' + value);
});
再次,这将产生两个信息:
flammable: inflammableduh: no duh
作为返回值是一个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".在回调函数中,this指的是每次迭代当前DOM元素。该函数可以返回一个单独的数据项目或数据项的数组并在结果集合中插入。如果数组返回,数组中的元素插入到集合。如果函数返回null或undefined ,没有元素将被插入。
.each() 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。更重要的是,回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。
假设页面上有这样一个简单的无序列表。
<ul>
<li>foo</li>
<li>bar</li>
</ul>
我们可以选中并迭代这些列表:
$('li').each(function(index) {
alert(index + ': ' + $(this).text());
});
列表中每一项会显示在下面的消息中:
0: foo1: bar
$.each()函数和.each()是不一样的,这个是专门用来遍历一个jQuery对象。$.each()函数可用于迭代任何集合,无论是“名/值”对象(JavaScript对象)或阵列。在一个数组的情况下,回调函数每次传递一个数组索引和相应的数组值。(该值也可以通过访问this关键字,但是JavaScript将始终包裹this值作为一个Object ,即使它是一个简单的字符串或数字值。)该方法返回其第一个参数,这是迭代的对象。
$.each([52, 97], function(index, value) {
alert(index + ': ' + value);
});
这将产生两个信息:
0: 521: 97
如果对象是作为集合使用,回调函数每次传递一个键值对的:
var map = {
'flammable': 'inflammable',
'duh': 'no duh'
};
$.each(map, function(key, value) {
alert(key + ': ' + value);
});
再次,这将产生两个信息:
flammable: inflammableduh: no duh
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-04-16
展开全部
each方法就相当于js中的for循环,返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。map将一组元素转换成其他数组(不论是否是元素数组),你可以用这个函数来通过新规则(如过滤掉数字)来建立一个新列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-04-16
展开全部
在each方法是要成为一个不可改变的迭代器,map的方法可以作为一个迭代器,但实际是为了操纵提供的数组并返回一个新数组。 另一个重要的一点要注意的是, each函数返回原来的阵列,而map函数返回一个新的数组。.如果你过度使用map的函数的返回值可以潜在地浪费了大量的内存。 还可以使用map功能从数组中删除一个项目map()调用的函数的每个元素,并存储返回的结果在一个新的数组。 你通常只需要使用回调函数的第一个参数。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询