jQuery 遍歷 filter() 方法

jQuery 參考手冊 遍歷

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

1. 語法

.filter(selector)

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

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

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

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

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

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

2. 使用過濾函數(shù)

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

請看下面這段稍顯復(fù)雜的 HTML 片段：

<ul>
  <li><strong>list</strong> item 1 one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong>    two strong tags</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');

3. 范例

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

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

jQuery 參考手冊 遍歷