快捷導(dǎo)航

jQuery 過濾方法filter()選擇具有特殊屬性的元素

更新時(shí)間：2014年06月15日 09:57:51 投稿：whsnow

需要選出所有有背景圖片的元素，使用jQuery的DOM過濾方法filter(),可以根據(jù)函數(shù)中表達(dá)的任何條件選擇元素,需要的朋友可以參考下

現(xiàn)在有這樣一種需求,需要選出所有有背景圖片的元素.
這個問題有點(diǎn)棘手.我們無法使用選擇表達(dá)式來完成這個問題了.
使用jQuery的DOM過濾方法filter(),可以根據(jù)函數(shù)中表達(dá)的任何條件選擇元素.

jQuery中的過濾器方法允許傳遞一個字符串(也就是選擇器表達(dá)式)作為參數(shù).
或者傳遞的是一個函數(shù).它的返回值將定義某個元素是否被選中.
傳遞的函數(shù)將對當(dāng)前選擇集中的每個元素運(yùn)行.
當(dāng)函數(shù)返回假時(shí),對應(yīng)的函數(shù)就從選擇集中被刪除掉.每當(dāng)返回值為真的時(shí)候,對應(yīng)的元素
不受影響.

復(fù)制代碼代碼如下:

 
jQuery('*').filter(function(){ 
return !!jQuery(this).css('background'); 
}); 

上述代碼選擇所有具有背景圖片的元素.
初始集合是所有元素(*).然后以一個函數(shù)為參數(shù)調(diào)用filter().
這個函數(shù)在每個集合上進(jìn)行是否有屬性background屬性的判斷,
如果有,則保留.否則,則在結(jié)果集中刪除這個元素.

你所看到的!! 是javascript中間任何undefined ,空類型,當(dāng)然還有false.
如果函數(shù)調(diào)用返回的是這些值,那么函數(shù)返回false,從而在集合中刪除

沒有background屬性的元素.
實(shí)際上,!!并不是必要的.因?yàn)閖Query將把這些返回值轉(zhuǎn)化為Boolean類型.但是保留仍然是一個好的主意.
這樣任何人看到你的代碼的時(shí)候,都能絕對肯定你的意圖.(這有助于代碼的可讀性).

在傳遞個filter()的函數(shù)中,可以通過this關(guān)鍵字引用當(dāng)前元素.
將它包含在jQuery函數(shù)中就變成了一個jQuery對象了.
this //常規(guī)的元素對象.
jQuery(this) //jQuery對象.
下面是激發(fā)你想象力的一些例子.

復(fù)制代碼代碼如下:

 
jQuery('div').filter(function(){ 
var width = jQuery(this).width; 
return width >100 && widht < 200; 
}); 
//返回子元素有10個或者20個的元素. 
jQuery('*').filter(function(){ 
var children = jQuery(this).childern().length; 
return children ===10 || children ===20; 

}); 

下面是一個代碼例子：判斷有背景顏色的元素，并將它們的背景顏色全部改為黑色。

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
.c1{ 
background-color: yellow; 
} 
.c2{ 
background-color: green; 
} 
p{ 
background-color: pink; 
} 
h3{ 
background-color: gray; 
} 
</style> 
</head> 
<body> 
<div class="c1">Bye Bye Beautiful</div> 
<div class="c2">Nothing but the girl</div> 
<p>The Lazy song</p> 
<h2>If I die young</h2> 
<h3>New soul</h3> 
<script type="text/javascript" src="jquery.2.0.3.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function($) { 
var ret = $('*').filter(function(index) { 
return !$(this).css('background-color'); 
}); 
$.each(ret, function(index, val) { 
$(val).css('background-color','black'); 
}); 
}); 
</script> 
</body> 
</html> 