JQuery 遍歷 操作數組 map、grep、filter 的區別



filter() 方法將匹配元素集合縮減為匹配指定選擇器的元素。
例如:
改變所有 div 的顏色,然后向類名為 "middle" 的類添加邊框:
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red"); 

注意:filter和find的區別
例如: $("div").filter(".rain"); 和 $("div").find(".rain");
find()會在div元素內尋找class為rain 的元素,是對它的子集操作
filter()則是篩選div的class為rain的元素,是對它自身集合元素篩選


$.grep() 函數使用指定的函數過濾數組中的元素,並返回過濾后的數組。
提示:源數組不會受到影響,過濾結果只反映在返回的結果數組中。
語法
$.grep( array, function [, invert ] )
特別注意:Function類型 指定的過濾函數。grep()方法為function提供了兩個參數:其一為當前迭代的數組元素,其二是當前迭代元素在數組中的索引。
例如: 輸出 5,8
$(function () {
var arr =$.grep( [1,5,8], function(n,i){
return n > 4;
});
$( "p" ).text( arr.join( ", " ) );
})

$.grep() 根據條件過濾,所以函數中為bool類型的表達式,而map()  則是返回一個對象或者值;


map() 把每個元素通過函數傳遞到當前匹配集合中,生成包含返回值的新的 jQuery 對象。
由於返回值是 jQuery 封裝的數組,使用 get() 來處理返回的對象以得到基礎的數組。
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );


get() 方法獲得由選擇器指定的 DOM 元素。 與 ajax - get() 方法 沒有關系,兩個不相關。
語法
$(selector).get(index)
例如:
獲得第一個 p 元素的名稱和值:
$("button").click(function(){
x=$("p").get(0);
$("div").text(x.nodeName + ": " + x.innerHTML);
});
或者:
$("button").click(function(){
x=$("p").eq(0);
$("div").text($(x).prop("tagName")+ ": " + $(x).html());
});

jQuery中get()和eq(的區別)
eq返回的是一個jquery對象 get返回的是一個html 對象數組
返回的是jQuery對象,就可以繼續調用其他方法,返回的是html數組就不能調用jQuery的其他方法
例如:
$("ul li").get(1).css("color", "red"); //這個是錯誤的
$("ul li").eq(1).css("color", "red"); //這個是正確的


Jquery的獲取元素標簽名稱的方法:
$( this ).prop("nodeName")

 

 

 

jQuery DOM 元素方法

函數 描述
.get() 獲得由選擇器指定的 DOM 元素。
.index() 返回指定元素相對於其他指定元素的 index 位置。
.size() 返回被 jQuery 選擇器匹配的元素的數量。
.toArray() 以數組的形式返回 jQuery 選擇器匹配的元素。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM