JQuery filter()用法及代碼示例

jQuery 是一個非常強大的工具，它幫助我們結合多種 DOM 遍曆方法來隨機或按順序選擇文檔中的元素。大多數 DOM 遍曆方法不會修改元素，而是根據給定條件過濾掉元素。
filter()方法用於過濾掉所有與所選條件不匹配的元素，並返回那些匹配的元素。
用法:

$(selector).filter(criteria, function(index))

參數：
criteria :它指定一個選擇器表達式、一個 jQuery 對象或從一組選定元素中返回的一個或多個元素。
function(index) :它指定為集合中的每個元素運行的函數。如果函數返回 true，則保留該元素。否則，它將被刪除。
index :集合中元素的索引位置。
注意：要指定多個條件，請使用逗號。

顯示 filter() 方法工作原理的 jQuery 代碼
代碼#1：
此代碼將返回與所選條件匹配的所有元素。


<html> 
  
<head> 
    <title>GEEKS FOR GEEKS ARTICLE</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/ 
                 jquery/3.3.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $("li").filter(".first, .last").css("color", "red") 
                .css("backgroundColor", "yellow"); 
        }); 
    </script> 
</head> 
  
<body> 
    <ul> 
        <li class="first">GeeksForGeeks</li> 
        <li class="first">GeeksForGeeks</li> 
        <li class="middle">GeeksForGeeks</li> 
        <li class="last">GeeksForGeeks</li> 
        <li class="last">GeeksForGeeks</li> 
    </ul> 
</body> 
  
</html>

輸出：

代碼#2：
此代碼將選擇與該函數檢查的條件相匹配的元素。此處，該函數檢查列表中的兩個元素並返回 true 或 false。


<html> 
  
<head> 
    <title>GEEKS FOR GEEKS ARTICLE</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/ 
                 jquery/3.3.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $("ul").filter(function() { 
                return $("li", this).length == 2; 
            }).css("color", "red").css("fontSize", "20"); 
        }); 
    </script> 
</head> 
  
<body> 
    A list with two elements: 
    <ul> 
        <li>option1</li> 
        <li>option2</li> 
    </ul> 
    A list with one element: 
    <ul> 
        <li>option1</li> 
    </ul> 
    A list with two elements: 
    <ul> 
        <li>option1</li> 
        <li>option2</li> 
    </ul> 
    A list with three elements: 
    <ul> 
        <li>option1</li> 
    </ul> 
    <ul> 
        <li>option2</li> 
    </ul> 
    <ul> 
        <li>option3</li> 
    </ul> 
</body> 
  
</html>

輸出：

相關用法

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