jQuery中map函數(shù)的兩種方式
兩種方式:
1、直接jQuery.map
//將原數(shù)組中每個(gè)元素加 4 轉(zhuǎn)換為一個(gè)新數(shù)組。 $.map( [0,1,2], function(n){ return n + 4; }); //結(jié)果: [4, 5, 6] //原數(shù)組中每個(gè)元素?cái)U(kuò)展為一個(gè)包含其本身和其值加 1 的數(shù)組,并轉(zhuǎn)換為一個(gè)新數(shù)組 $.map( [0,1,2], function(n){ return [ n, n + 1 ]; }); //結(jié)果: [0, 1, 1, 2, 2, 3]
2、遍歷對(duì)象.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(',');
結(jié)果:two,four,six,eight
解析:
map()的功能主要有兩步, 第一步就是遍歷,第二步就是替換 。
$( " li " ).map( function(){ return $(this).text(); // 注意return關(guān)鍵字不可少 })
map先遍歷,每一項(xiàng)都返回一個(gè)text()值 ,然后map會(huì)將這些值自動(dòng)去替換$("li")集合的每一項(xiàng)值,所以 這個(gè)時(shí)候還是個(gè)類(lèi)數(shù)組(因?yàn)檫€是$(" li ")的殼子),不是個(gè)真正的數(shù)組 。于是后面加個(gè)get()操作就變成真正的數(shù)組了,于是可以用join()這樣專(zhuān)屬于數(shù)組的方法。
以上所述是小編給大家介紹的jQuery中map函數(shù)的兩種方式,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的,在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 原生JS forEach()和map()遍歷的區(qū)別、兼容寫(xiě)法及jQuery $.each、$.map遍歷操作
- js/jquery遍歷對(duì)象和數(shù)組的方法分析【forEach,map與each方法】
- Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象,Map()方法詳解以及數(shù)組中查詢(xún)某值是否存在
- jQuery篩選數(shù)組之grep、each、inArray、map的用法及遍歷json對(duì)象
- jquery.map()方法的使用詳解
- jquery的map與get方法詳解
- Jquery $.map使用方法實(shí)例詳解
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法,可實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊上方文字即可在下方勾選處文本框顯示對(duì)應(yīng)文字的效果,涉及jQuery鼠標(biāo)事件及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下2015-05-05JQuery頁(yè)面的表格數(shù)據(jù)的增加與分頁(yè)的實(shí)現(xiàn)
使用JQuery實(shí)現(xiàn)頁(yè)面的表格數(shù)據(jù)的增加與分頁(yè),具體示例如下,喜歡的朋友可以參考下2013-12-12jQuery插件echarts實(shí)現(xiàn)的去掉X軸、Y軸和網(wǎng)格線(xiàn)效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的去掉X軸、Y軸和網(wǎng)格線(xiàn)效果,結(jié)合實(shí)例形式分析了echarts插件繪制表格圖及圖形相關(guān)屬性設(shè)置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jquery不會(huì)自動(dòng)回收xmlHttpRequest對(duì)象 導(dǎo)致了內(nèi)存溢出
在園子里面看到kuibono的文章說(shuō)JQuery不會(huì)自動(dòng)回收xmlHttpRequest對(duì)象,并且在每次Ajax請(qǐng)求之后都會(huì)創(chuàng)建一個(gè)新的xmlHttpRequest對(duì)象,感到驚訝,索性寫(xiě)了一個(gè)程序驗(yàn)正了一下,果然如kuibono所言2012-06-06EasyUI中datagrid在ie下reload失敗解決方案
這篇文章主要介紹了EasyUI中datagrid在ie下reload失敗解決方案,結(jié)合網(wǎng)上搜集來(lái)的幾種方案,最終解決了這個(gè)問(wèn)題,分享給大家,希望對(duì)大家能夠有所幫助。2015-03-03jQuery.extend 函數(shù)及用法詳細(xì)
Jquery的擴(kuò)展方法extend是我們?cè)趯?xiě)插件的過(guò)程中常用的方法,該方法有一些重載原型,在此,我們一起通過(guò)本篇文章學(xué)習(xí)jquery.extend函數(shù)及用法詳解吧2015-09-09jQuery實(shí)現(xiàn)標(biāo)題有打字效果的焦點(diǎn)圖代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)標(biāo)題有打字效果的焦點(diǎn)圖代碼,可實(shí)現(xiàn)幻燈片切換顯示時(shí)標(biāo)題同步逐個(gè)打印顯示的效果,涉及jQuery操作json格式數(shù)據(jù)及時(shí)間函數(shù)的相關(guān)技巧,需要的朋友可以參考下2015-11-11jquery easyui如何實(shí)現(xiàn)格式化列
本篇文章主要介紹了jquery easyui如何實(shí)現(xiàn)格式化列 ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07