當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .filter()用法及代碼示例


用法 
.filter( selector ) => jQuery

說明：將匹配元素的集合減少為匹配選擇器或通過函數測試的元素。

  • 添加的版本：1.0.filter( selector )

    • selector
      類型：Selector
      一個包含選擇器表達式的字符串，用於匹配當前的元素集。

  • 添加的版本：1.0.filter( function )

    • function
      類型：Function(Integer 索引，Element 元素)=> Boolean
      用於測試集合中每個元素的函數。 this 是當前的 DOM 元素。

  • 添加的版本：1.4.filter( elements )

    • elements
      類型：Element
      一個或多個 DOM 元素來匹配當前的一組元素。

  • 添加的版本：1.4.filter( selection )

    • selection
      類型：jQuery
      一個現有的 jQuery 對象來匹配當前的元素集。

給定一個表示一組 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( ":nth-child(2n)" ).css( "background-color", "red" );

此調用的結果是項目 2、4 和 6 的紅色背景，因為它們與選擇器匹配。

使用過濾器函數

該方法的第二種形式允許我們根據函數而不是選擇器過濾元素。對於每個元素，如果函數返回true(或"truthy" 值)，則該元素將包含在過濾集中；否則，它將被排除在外。假設我們有一個更複雜的 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" );

此代碼將僅更改第一個列表項，因為它恰好包含一個 <strong> 標記。在過濾器函數中，this 依次引用每個 DOM 元素。傳遞給函數的參數告訴我們該 DOM 元素在 jQuery 對象匹配的集合中的索引。

我們還可以利用通過函數傳遞的index，它指示元素在未過濾的匹配元素集中的從 0 開始的位置：

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

對代碼的這種更改將導致第三個和第六個列表項被突出顯示，因為它使用模運算符 (%) 選擇具有 index 值的每個項目，當除以 3 時，餘數為 2 。

注意：當一個 CSS 選擇器字符串被傳遞給.filter(), 文本和注釋節點將在過濾過程中始終從生成的 jQuery 對象中刪除。當提供特定節點或節點數組時，隻有當它匹配過濾數組中的一個節點時，文本或注釋節點才會包含在結果 jQuery 對象中。

例子：

更改所有div的顏色；然後為具有"middle" 類的對象添加邊框。

<!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.5.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的顏色；然後為第二個(索引== 1)和ID為"fourth."的div添加邊框

<!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.5.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" 的那個。

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

選擇所有 div 並使用 jQuery 對象過濾選擇，隻保留 ID 為 "unique" 的那個。

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

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .filter()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。