JQuery是目前應用最廣泛的前端框架之一,它的選擇器和方法非常方便使用,尤其是在集合式操作上更是得心應手。而JQuery Map循環取值就是一種集合式操作,它可以非常輕松方便的對集合中的元素進行遍歷和取值。
JQuery的Map()方法是將集合中的每個元素傳入一個函數進行處理,然后將處理后的結果存儲在一個新的集合中,最后返回這個新的集合。例如,可以使用Map()方法將一組li元素的文本轉換成大寫并存儲在一個數組中:
var liTextArray = $("li").map(function() {
return $(this).text().toUpperCase();
}).get();
console.log(liTextArray); // ["ITEM 1", "ITEM 2", "ITEM 3"]
上面的代碼中,首先選取了文檔中的所有li元素,然后對每個li元素使用Map()方法傳入一個匿名函數,該函數將獲取到的li元素的文本轉換成大寫,并將轉換后的結果存儲到新的數組中。最后調用get()方法將新的數組返回。
Map()方法的最終目的是將多個元素進行處理并存儲到一個新的集合中,但我們有時也需要對每個單獨的元素進行額外的操作。下面是一個使用Map()方法遍歷表單元素,在每個元素前添加一個星號的示例代碼:
$("form :input").map(function() {
$(this).before("*");
return $(this);
});
在這個例子中,我們選取了所有form表單元素的子元素,然后遍歷每個子元素,在它前面添加了一個星號,并將它自身的JQuery對象返回。在Map()方法返回的新集合中,每個元素都被包裝為一個JQuery對象,因此我們可以繼續使用JQuery的其他方法來操作這些元素。
在實際應用中,我們可以使用Map()方法對任何類型的集合進行遍歷和處理。值得注意的是,Map()方法并不會改變原始集合,而是返回一個新的集合。因此,我們需要特別注意新集合的使用和銷毀,以免造成內存泄漏等問題。
上一篇dockerslim