實(shí)例

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

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

親自試一試

定義和用法

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

語(yǔ)法

.filter(selector)

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

詳細(xì)說(shuō)明

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

請(qǐng)思考下面這個(gè)擁有簡(jiǎn)單列表的頁(yè)面：

<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>

我們可以向這個(gè)列表項(xiàng)集合應(yīng)用該方法：

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

親自試一試

此調(diào)用的結(jié)果是將項(xiàng)目 1, 3, 5 的背景設(shè)置為紅色，這是因?yàn)樗鼈兌计ヅ溥x擇器（回憶一下，:even 和 :odd 均使用基于 0 的 index）。

使用過(guò)濾函數(shù)

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

請(qǐng)看下面這段稍顯復(fù)雜的 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>

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

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