jQuery 过滤

在本教程中，您将学习如何使用 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>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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> 元素。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery last() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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> 元素。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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) 表示匹配元素集中的倒数第二个元素。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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() 方法提供的选择器或函数将针对匹配元素集中的每个元素以及匹配提供的选择器或通过函数测试的所有元素进行测试将包含在结果中。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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> 元素，即仅突出显示第二个和第四个列表项，因为索引是从零开始的。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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> 元素。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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() 方法的选择器或函数针对匹配元素集中的每个元素以及所有 不匹配提供的选择器或传递函数的测试将包含在结果中。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery not() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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> 元素，即突出显示第一个和第三个列表项。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery not() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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() 方法过滤由一系列索引指定的匹配元素集。此方法接受 start 和 end（可选）索引号作为参数，其中开始索引指定元素开始被选择的位置，结束索引指定位置元素停止被选择的位置。

下面的示例将通过在文档就绪时添加类 .highlight 来突出显示 <ul> 元素中的第一个和第二个 <li> 元素。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slice() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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)，因为结束位置不包括在结果中。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slice() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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 过滤

过滤元素选择

jQuery first() 方法

示例

jQuery last() 方法

示例

jQuery eq() 方法

示例

示例

jQuery filter() 方法

示例

示例

jQuery has() 方法

示例

jQuery not() 方法

示例

示例

jQuery slice() 方法

示例

示例

关于我们

联系方式

互动工具

jQuery `first()` 方法

jQuery `last()` 方法

jQuery `eq()` 方法

jQuery `filter()` 方法

jQuery `has()` 方法

jQuery `not()` 方法

jQuery `slice()` 方法