.filter()

分類：遍歷 > 篩選

.filter( selector )傳回：jQuery

說明：將符合選擇器或通過函式測試的匹配元素集合縮減。

給定一個表示 DOM 元素集合的 jQuery 物件，.filter() 方法會從符合元素的子集合建構一個新的 jQuery 物件。提供的選擇器會測試每個元素；所有符合選擇器的元素都會包含在結果中。

考慮一個包含簡單清單的網頁

1
2
3
4
5
6
7
8
 
<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>

我們可以將此方法套用於清單項目集合

1
 
$( "li" ).filter( ":nth-child(2n)" ).css( "background-color", "red" );

此呼叫的結果會讓項目 2、4 和 6 變成紅色背景，因為它們符合選擇器。

使用篩選函數

此方法的第二種形式允許我們根據函數而不是選擇器來篩選元素。對於每個元素，如果函數傳回 true（或「真值」），則元素會包含在經過篩選的集合中；否則，它會被排除在外。假設我們有一個更複雜的 HTML 片段

1
2
3
4
5
6
7
8
9
 
<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>

我們可以選取清單項目，然後根據其內容進行篩選

1
2
3
4
5
 
$( "li" )
  .filter(function( index ) {
    return $( "strong", this ).length === 1;
  })
    .css( "background-color", "red" );

此程式碼只會變更第一個清單項目，因為它只包含一個 <strong> 標籤。在篩選函數中，this 指的是每個 DOM 元素。傳遞給函數的參數會告訴我們該 DOM 元素在與 jQuery 物件相符的集合中的索引。

我們也可以利用傳遞至函式的index，它表示未過濾的匹配元素集合中元素的 0 為基準的位置

1
2
3
4
5
 
$( "li" )
  .filter(function( index ) {
    return index % 3 === 2;
  })
    .css( "background-color", "red" );

對程式碼的這項變更會導致第三和第六個清單項目被突顯，因為它使用模數運算子 (%) 來選取每個index值，當除以 3 時，餘數為2。

注意：當將 CSS 選擇器字串傳遞至.filter()時，文字和註解節點將在過濾處理期間始終從產生的 jQuery 物件中移除。當提供特定節點或節點陣列時，文字或註解節點僅會在與過濾陣列中的其中一個節點相符時包含在產生的 jQuery 物件中。

範例

變更所有 div 的顏色；然後為具有「middle」類別的 div 新增邊框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>filter demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 2px white solid;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
 
<script>
$( "div" )
  .css( "background", "#c8ebcc" )
  .filter( ".middle" )
    .css( "border-color", "red" );
</script>
 
</body>
</html>

示範

變更所有 div 的顏色；然後為第二個 div (index == 1) 和 id 為「fourth」的 div 新增邊框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>filter demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 3px white solid;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
 
<script>
$( "div" )
  .css( "background", "#b4b0da" )
  .filter(function( index ) {
    return index === 1 || $( this ).attr( "id" ) === "fourth";
  })
    .css( "border", "3px double red" );
</script>
 
</body>
</html>

示範

選取所有 div，並使用 DOM 元素過濾選取，僅保留 id 為「unique」的元素。

1
 
$( "div" ).filter( document.getElementById( "unique" ) );

選取所有 div，並使用 jQuery 物件過濾選取，僅保留 id 為「unique」的元素。

1
 
$( "div" ).filter( $( "#unique" ) );