# jQuery 遍歷 - filter() 方法 ## 實例 改變所有 div 的顏色，然后向類名為 "middle" 的類添加邊框： ``` $("div").css("background", "#c8ebcc") .filter(".middle") .css("border-color", "red"); ``` ## 定義和用法 filter() 方法將匹配元素集合縮減為匹配指定選擇器的元素。 ### 語法 ``` .filter(_selector_) ``` | 參數 | 描述 | | --- | --- | | _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'); ``` 此調用的結果是將項目 1, 3, 5 的背景設置為紅色，這是因為它們都匹配選擇器（回憶一下，:even 和 :odd 均使用基于 0 的 index）。 ## 使用過濾函數 使用該方法的第二個形式是，通過函數而不是選擇器來篩選元素。對于每個元素，如果該函數返回 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> ``` 我們可以選取這些列表項，然后基于其內容來篩選它們： ``` $('li').filter(function(index) { return $('strong', this).length == 1; }).css('background-color', 'red'); ```