實例

改變所有 div 的顏色，然后向類名為 "middle" 的類添加邊框：

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

親自試一試

定義和用法

filter() 方法將匹配元素集合縮減為匹配指定選擇器的元素。

語法

.filter(selector)

參數(shù)	描述
selector	字符串值，包含供匹配當前元素集合的選擇器表達式。

詳細說明

如果給定表示 DOM 元素集合的 jQuery 對象，.filter() 方法會用匹配元素的子集構造一個新的 jQuery 對象。所使用的選擇器會測試每個元素；所有匹配該選擇器的元素都會包含在結果中。

請思考下面這個擁有簡單列表的頁面：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

我們可以向這個列表項集合應用該方法：

$('li').filter(':even').css('background-color', 'red');

親自試一試

此調(diào)用的結果是將項目 1, 3, 5 的背景設置為紅色，這是因為它們都匹配選擇器（回憶一下，:even 和 :odd 均使用基于 0 的 index）。

使用過濾函數(shù)

使用該方法的第二個形式是，通過函數(shù)而不是選擇器來篩選元素。對于每個元素，如果該函數(shù)返回 true，則元素會被包含在已篩選集合中；否則，會排除這個元素。

請看下面這段稍顯復雜的 HTML 片段：

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong>
   - two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

我們可以選取這些列表項，然后基于其內(nèi)容來篩選它們：

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');