jquery的find()方法與filter()方法對于初學者來說容易混淆,在這里對這兩個方法通過一個小例子來進行比較和說明。旨在了解這兩種方法的區別。
html代碼
問題:這里為什么“測試2”不變為紅色?
find() 方法定義:它是獲得當前元素集合中每個元素的后代,通過選擇器、jQuery 對象或元素來篩選。
find()方法要注意的地方:find()方法是在當前元素集合內部查找。不包括自己。
上面例子中$("div")包含兩個元素。第一個元素符合要求。但第二個元素div本身的class雖然是"rain",但其內部沒有class=rain。所以不符合。
下面使用filter()方法看看有什么新玩意
$("div").filter(".rain").css('color', '#FF0000');
顯示結果:
filter()方法定義:filter() 方法將匹配元素集合縮減為指定選擇器的元素。
意思就是對匹配元素的集合,用選擇器測試每個元素本身(不是后代),符合選擇器的元素包含在集合中,不符合的去掉(選擇器就是起過濾作用)。形成一個新的結果集。
在上面例子中:find()會在div元素內部(后代)尋找 class為rain 的元素。而filter()則是篩選div的class為rain的元素。一個是對它的子集操作,一個是對自身集合元素篩選。
使用filter()方法的第二個形式是,通過函數而不是選擇器來篩選元素。對于每個元素,如果該函數返回 true,則元素會被包含在已篩選集合中;否則,會排除這個元素。
看一下下面的例子:
這里在順便說一下find()方法和children()方法的區別
find()方法上面已經說過了,在此不在熬述,下面說一下children()方法。
children,表面意思就是:孩子,兒童,子女的意思。我一般這里理解為子女或兒子。為什么這樣理解?下面先看一下children的定義吧
children()方法定義:它是獲得匹配元素集合中每個元素的所有子元素。(不包括自己,只能在兒子輩(第一層)查找)
find() 方法定義: 它是獲得當前元素集合中每個元素的后代,通過選擇器、jQuery 對象或元素來篩選。
我理解是children是匹配集合中每個元素的“兒子輩”的子元素。find()除了兒子輩,還包括孫子輩。即只要是它的后代就行。
下面通過一個例子來看看:
新聞熱點
疑難解答