首頁  >  文章  >  web前端  >  jQuery 過濾方法filter()選擇具有特殊屬性的元素_jquery

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

WBOY
WBOY原創
2016-05-16 16:44:371553瀏覽

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

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

複製程式碼 程式碼如下:

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

上述程式碼選擇所有具有背景圖片的元素.
初始集合是所有元素(*).然後以一個函數為參數呼叫filter().
這個函數在每個集合上進行是否有屬性background屬性的判斷,
如果有,則保留.否則,則在結果集中刪除這個元素.

你所看到的!! 是javascript中間任何undefined ,空類型,當然還有false.
如果函數呼叫返回的是這些值,那麼函數返回false,從而在集合中刪除

沒有background屬性的元素.
實際上,!!並不是必要的.因為jQuery將把這些回傳值轉換為Boolean類型.但保留仍然是一個好的主意.
這樣任何人看到你的程式碼的時候,都能絕對肯定你的意圖.(這有助於程式碼的可讀性).

在傳遞個filter()的函數中,可以透過this關鍵字引用當前元素.
將它包含在jQuery函數中就變成了一個jQuery物件了.
this //常規的元素物件.
jQuery(this) //jQuery物件.
以下是一些激發你想像力的例子.
複製程式碼 程式碼如下:

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

});

下面是一個程式碼範例:判斷有背景顏色的元素,並將它們的背景顏色全部改為黑色。
複製代碼 代碼如下:







Bye Beautiful

Nothing but the girl

The Lazy song


If I die young


New soul






陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn