摘要:本文详细讲解了jQuery内置函数map和each,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
方法语法: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: foo1: bar
两者的区别
map()方法主要用来遍历操作数组和对象,each()主要用于遍历jquery对象。
each()返回的是原来的数组,并不会新创建一个数组。
map()方法会返回一个新的数组。如果在没有必要的情况下使用map,则有可能造成内存浪费。
$.each()
$.each()函数可用于迭代任何集合,无论是名/值对象(JavaScript对象)或数组。
1、遍历数组(有附件参数)
$.each(Array, function(p1, p2){ this; //这里的this指向每次遍历中Array的当前元素 p1; p2; //访问附加参数
}, ['参数1', '参数2']);
2、遍历对象(没有附加参数)
$.each(Object, function(name, value) { this; //this指向当前属性的值 name; //name表示Object当前属性的名称 value; //value表示Object当前属性的值 });
本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号