jQuery 過濾

Created: October-14, 2018

在本教程中，你將學習如何使用 jQuery 過濾元素的選擇。

過濾元素選擇

jQuery 提供了幾種方法，如 filter()、first()、last()、eq()、slice()、has() 和 not() 等，你可以用它來縮小為一個 DOM 樹元素的搜尋。

jQuery `first()` 方法

jQuery first() 方法過濾匹配元素集並返回集合中的第一個元素。以下示例僅通過在文件就緒後新增類 .highlight 來突出顯示 <ul> 元素中的第一個 <li> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery first() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").first().addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html>

jQuery `last()` 方法

jQuery last() 方法過濾匹配元素集並返回集合中的最後一個元素。以下示例僅通過在文件就緒後新增 .highlight 類來突出顯示 <ul> 元素中的最後一個 <li> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery last() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").last().addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html>

jQuery `eq()` 方法

jQuery eq() 方法過濾匹配元素集，並僅返回一個具有指定索引號的元素。以下示例將通過在文件就緒後新增 .highlight 類來突出顯示 <ul> 元素中的第二個 <li> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").eq(1).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html>

注意： 提供給 eq() 方法的索引指示元素的從 0 開始的位置，這意味著索引 0 定位第一個元素，索引 1 定位第二個元素，依此類推。此索引也指向 jQuery 物件中元素的位置，而不是 DOM 樹中的位置。

你還可以指定負索引號。負索引號表示從集合結束開始的位置，而不是開頭。例如， eq(-2) 指示匹配元素集合中的倒數第二個元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").eq(-2).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

jQuery `filter()` 方法

jQuery filter() 方法可以將選擇器或函式作為其引數，以根據特定條件過濾匹配元素集。

根據 filter() 匹配元素集中的每個元素測試提供的方法選擇器或函式，並且所有與提供的選擇器匹配或傳遞函式測試的元素將包含在結果中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").filter(":even").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

如前所述，你還可以將函式傳遞給 filter() 方法，以根據特定條件過濾匹配元素集。以下示例將測試 <ul> 其中的每個 <li> 元素，並突出顯示索引為奇數的 <li> 元素，即僅突出顯示第二個和第四個列表項，因為索引是從零開始的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").filter(function(index){
        return index % 2 !== 0;
    }).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Last list item</li>
    </ul>
</body>
</html>

jQuery `has()` 方法

jQuery has() 方法過濾匹配元素集，並僅返回具有指定後代元素的元素。以下示例將突出顯示具有 <ul> 後代元素的所有 <li> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").has("ul").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>Section 1</li>
        <li>Section 2</li>
        <li>
            <ul>
                <li>Section 2.1</li>
                <li>Section 2.2</li>
                <li>Section 2.3</li>
            </ul>
        </li>
        <li>Section 4</li>
    </ul>
</body>
</html>

jQuery `not()` 方法

jQuery not() 方法過濾匹配元素集並返回不滿足指定條件的所有元素。它可以將選擇器或函式作為其引數。

為 not() 方法提供的選擇器或函式將針對匹配元素集中的每個元素進行測試，並且所有與提供的選擇器不匹配或通過函式測試的元素將包含在結果中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery not() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").not(":even").addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

該 not() 方法可以採用與 filter() 相同的方式將函式作為其引數，但它實現的與 filter() 方法相反，即通過該函式測試的元素會被排除，其他元素包含在結果中。

下面的示例將測試 <ul> 中的每個 <li> 元素，並突出顯示那些索引不是奇數的 <li> 元素，即突出顯示第一個和第三個列表項。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery not() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").not(function(index){
        return index % 2 !== 0;
    }).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

jQuery `slice()` 方法

jQuery slice() 方法過濾由一系列索引指定的匹配元素集。此方法接受開始和結束（可選）索引號作為引數，其中起始索引指定元素開始被選擇的位置，結束索引指定元素停止被選中的位置。

以下示例將通過在文件就緒後新增 .highlight 類來突出顯示 <ul> 元素中的第一個和第二個 <li> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slice() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").slice(0, 2).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

你還可以指定負索引號。負索引號表示從集合結束開始的位置，而不是開頭。例如， slice(-2, -1) 唯一突出顯示第三個列表項，因為它是結尾（-2）和結束（-1）中兩個之間範圍內的唯一項，因為結果中不包括結束位置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slice() Demo</title>
<style type="text/css">
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul li").slice(-2, -1).addClass("highlight");
});
</script>
</head>
<body>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

過濾元素選擇

jQuery first() 方法

jQuery last() 方法

jQuery eq() 方法

jQuery filter() 方法

jQuery has() 方法

jQuery not() 方法

jQuery slice() 方法