当前位置:首页 > 编程教程 > jQuery技术文章 > jquery map方法使用示例

关于jquery map方法使用

  • 发布时间:
  • 作者:码农之家
  • 点击:189

这篇文章主要知识点是关于jquery、map、Jquery中map函数的用法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战案例精粹
  • 类型:jQuery大小:272 MB格式:PDF作者:吴绍兴//李勇//明廷
立即下载

jquery map方法使用示例

jQuery.map( array, callback(elementOfArray, indexInArray) )

Returns: Array

感觉jquery的map方法非常好用,特向大家分享下。

方法作用:将数组或单个对象,替换为新的内容。
应用实例:获取一组checkbox的值,以英文逗号分隔,进行拼接。

 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
$(function(){
$("input").click(function(){
var str = $(":checked").map(function(){
return this.value;
}).get().join(",")
$("span").html(str);
})
})
</script>
</head>
<body>
<input type="checkbox" value="a"/>a
<input type="checkbox" value="b"/>b
<input type="checkbox" value="c"/>c
<br/>
结果展示:<span/>
</body>
</html>

对于CSDN的代码编辑,实在不敢恭维,我在jsFiddle创建了上述例子,附链接:http://jsfiddle.net/dV8eh/。

Jquery中map函数的用法

很久没用map()这个函数了,由于最近看一篇react的文章,其中有谈到map()这个函数,于是就重新查了一些资料,发现map()函数可以用在不同的地方,下面小编总结具有内容分享给大家,也方便今后查找。

其实,本人一直很少用map()这个函数,因为最近看一篇React的文章,其实有谈及map()函数,于是自己也重新查了一些资料,发现map()函数也可以用在不同的地方:

map()函数把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的Jquery对象

语法:.map(callback(index,domElement))

callback(index,domElment)》》》》对当前集合中每个元素调用的函数对象;

如:

<html>
<ul> 
<li id="num1"> 
<p>你好</p> 
</li> 
<li id="num2"> 
<p>你好</p> 
</li> 
<li id="num3"> 
<p>你好</p> 
</li>
</ul> 
</html>

js:

var result=$("ul li").map(function(i,val){ 
console.log(i,val);// 
return this.id;});

解释:

console.log(i,val);

打印如图所示:

Jquery中map函数的用法

console.log( typeof result) // ---当然,如果打印这个result类型是object对象;
Anyway,It is ok!let us go on!

由于返回值是jquery封装的数组,那么我们使用get()来处理返回的对象以得到基础的数组

PS:而get()方法获得由选择器指定的Dom元素语法如下:

$(selector).get(index);index:可选。规定的获取哪个匹配元素(通过index编号);

那么,代码继续:

var result=$("ul li").map(function(i,val){ 
console.log(i,val); 
return this.id;});console.log( typeof result) // ---objectconsole.log(result.get()); 

这个时候,result.get()会得到如图结果:

Jquery中map函数的用法

PS:它会得到一维数组,可能有些情况下大家会需要得到这样的效果,只要在适当的时候用get()方法就可以了!

当然,我们可以连上拼接join()方法抽离数组;

var result=$("ul li").map(function(i,val){ 
console.log(i,val); 
return this.id;});console.log( typeof result) // ---objectconsole.log(result.get());
console.log(result.get().join(',')) 

如图:

Jquery中map函数的用法

最后,总结一些:在callback函数内部,this引用每次迭代的当前DOM元素。该函数可返回单独的数据项,或者是要被插入结果集中的数据项的数组。如果返回的是数组,数组内的元素会被插入其中。如果函数返回null或者undefined,则不会插入任何元素。

以上所述是小编给大家介绍的Jquery中map函数的用法 ,希望对大家大家有所帮助!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jquery map 相关电子书
学习笔记
网友NO.114216

js/jquery遍历对象和数组的方法分析【forEach,map与each方法】

本文实例讲述了js/jquery遍历对象和数组的方法。分享给大家供大家参考,具体如下: JS forEach方法 arr[].forEach(function(value,index,array){ //do something}) 参数:value数组中的当前项,index当前项的索引,array原始数组; 数组中有几项,那么传递进去的匿名回调函数就需要执行几次; 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是可以自己通过数组的索引来修改原来的数组; var arr = [12,23,24,42,1];var res = arr.forEach(function (item,index,input) { input[index] = item*10;})console.log(res);//--undefined;console.log(ary);//--[120,230,240,420,10]; 通过数组索引改变了原数组 JS map方法 arr[].map(function(value,index,array){ //do something}) 参数:value数组中的当前项,index当前项的索引,array原始数组; 区别:map的回调函数中支持return返回值;return的是啥,相当于把数组中的这……

网友NO.157879

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) { return i + 1; }); // newItems is [2,3,4,5] ​使用each时,改变的还是原来的items数组,而使用map时,不改变items,只是新建一个新的数组。 ​例如: var items = [0,1,2,3,4,5,6,7,8,9]; var itemsLessThanEqualFive = $.map(items, function(i) { // removes all items 5 if (i 5) return null; return i; }); // itemsLessThanEqualFive = [0,1,2,3,4,5] 当需要对数组进行删除时也是如此,所以删除时错误使用each或map后果还是蛮严重的。 ……

网友NO.542189

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()……

网友NO.559375

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(){ return this.value; }).get().join(","); console.log(tt); jQuery下有个概念叫“类数组”,比如$(":checkbox"),当取到一个集合的时候,会有数组的一些属性,但是instancseof Array仍然是false。但是var a=$( "li" ).get()这样处理一下,然后instancseof Array就返回true。 map()的功能主要有两步,第一步就是遍历,第二步就是替换。 对于instanceof和typeof,以前偶尔的用到过,特别是typeof用到的相对更多一些,今日研究ext源码,很多地方都用到了instanceof,突然觉得他们两个有些相似但也应该有他们区别,网上看了一些文章,对它们之间的关系有了一定的了解。 instanceof和typeof都能用来判断一个变量是否为空或是什么类型的变量。 typeof用以获取一个变量的类型,typeof一般只能……

网友NO.515891

jQuery中map函数的两种方式

两种方式: 1、直接jQuery.map //将原数组中每个元素加 4 转换为一个新数组。$.map( [0,1,2], function(n){ return n + 4;});//结果:[4, 5, 6]//原数组中每个元素扩展为一个包含其本身和其值加 1 的数组,并转换为一个新数组$.map( [0,1,2], function(n){ return [ n, n + 1 ];});//结果:[0, 1, 1, 2, 2, 3] 2、遍历对象.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$(':checkbox').map(function() { return this.id;}).get().join(','); 结果:two,four,six,eight 解析: map()的功能主要有两步, 第一步就是遍历,第二步就是替换 。 $( " li " )……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com