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() 方法