jQuery filter() 方法

jQuery 中的filter方法用於篩選符合特定條件的元素。

此方法允許您根據特定條件（例如特定的 CSS 選擇器、評估每個元素的函式或包含要匹配的元素的 jQuery 物件）來細化一組選定的元素。不符合指定條件的元素將從選擇中刪除，而符合條件的元素將被返回。

filter() 方法與 not() 方法的作用相反。

語法

以下是 jQuery 中 filter() 方法的語法：

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

引數

此方法接受以下可選引數：

criteria (可選)：可以是選擇器表示式、jQuery 物件或一個或多個元素，也可以是新增到現有元素組的 HTML 片段。
function(index) (可選)：用於對集合中每個元素執行的函式。此函式應返回 true 以包含元素，返回 false 以排除元素。

示例 1

在下面的示例中，我們使用 jQuery 的 filter() 方法根據 CSS 選擇器篩選特定元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('li').filter('.highlight').css('color', 'green');
});
</script>
</head>
<body>
<ul>
    <li class="highlight">Item 1</li>
    <li>Item 2</li>
    <li class="highlight">Item 3</li>
    <li>Item 4</li>
</ul>
</body>
</html>

執行上述程式後，類為 "highlight" 的 <li> 元素的顏色將變為綠色。

示例 2

在這個示例中，我們演示如何篩選所有類為 "highlight1" 和 id 為 "highlight2" 的 <li> 元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('li').filter('.highlight1, #highlight2').css('color', 'green');
});
</script>
</head>
<body>
<ul>
    <li class="highlight1">Item 1</li>
    <li>Item 2</li>
    <li id="highlight2">Item 3</li>
    <li>Item 4</li>
</ul>
</body>
</html>

執行上述程式後，類為 "highlight1" 和 id 為 "highlight2" 的 <li> 元素將被篩選，顏色為“綠色”。

示例 3

下面的程式使用包含類為 ".other-divs" 的元素的 jQuery 物件 "$otherDivs" 篩選所有 <div> 元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // Defining a jQuery object containing elements to match against
    const $otherDivs = $('.other-divs');
    // Filtering <div> elements using the defined jQuery object
    $('div').filter($otherDivs).css('border', '2px solid green');
});
</script>
</head>
<body>
<div class="other-divs">I'm Mickey Mouse.</div>
<div>I'm goofy.</div>
<div class="other-divs">I'm Donald Duck.</div>
<div>I'm Pluto.</div>
</body>
</html>

執行上述程式後，類為 "other-divs" 的 <div> 元素將具有綠色的邊框。

示例 4

在下面的示例中，我們演示瞭如何使用 filter() 方法和一個函式來篩選 <div> 元素，依據是它們是否具有類 'highlight'：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('div').filter(function() {
        return $(this).hasClass('highlight');
    }).css('background-color', 'green');
});
</script>
</head>
<body>
<div class="highlight">I'm Mickey Mouse.</div>
<div>I'm goofy.</div>
<div class="highlight">I'm Donald Duck.</div>
<div>I'm Pluto.</div>
</body>
</html>

執行上述程式後，類為 "highlight" 的 <div> 元素的背景顏色將變為綠色。

jquery_ref_traversing.htm

列印頁面