前端开发

 首页 > 前端开发 > jquery教程 > jQuery函数map()和each()介绍及异同点分析_jquery_自学

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

分享到:
【字体:
导读:
          这篇文章主要介绍了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 框:

复制代码 代码如下:





















我们可以得到一个用逗号分隔的复选框 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 总是指向这个元素。

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

复制代码 代码如下:


  • foo

  • bar


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

复制代码 代码如下:

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

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

0: foo
1: bar
两者的区别

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

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

分享到:
jquery的总体架构分析及实现示例详解_jqu...
jQuery整体框架甚是复杂,也不易读懂,这几日一直在研究这个笨重而强大的框架。jQuery的总体架构可以分为:入口模块、底层模块和功能模块。这里,我们以jquery-1.7.1为例进行分析。 jquery的总体架构 复制代码 代码如下: 16 (function( window, undefined ) {          // 构造 jQuery 对象   22    ...
jquery插件推荐浏览器嗅探userAgent_jque...
综合概述 jQuery在1.7.x版本中,去掉了对浏览器嗅探支持,建议使用特性检测,然而在实际项目中,或多或少也需要这个功能。 兼容性 IE6+、Chrome、Firefox、Safari、Opera 框架依赖 原生JS支持 模块支持 支持AMD、node和浏览器 使用介绍 1.识别引擎、举例如下: //如果浏览器是webkit核心,执行以下代码 if(!!cli...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……