PricingLoginStart free
jQuery Academy · 课时

使用 .filter() 进行高级筛选

探索 .filter() 方法的完整能力，使用函数应用自定义逻辑，并根据动态属性或关系选择元素。

第 2 / 3 课11 个步骤

使用 .filter() 进行高级筛选 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。

使用 .filter() 优化选择

jQuery 中的 .filter() 方法是缩小现有已选元素集合的强大工具。它可以帮助您只保留符合特定条件的元素。

您可以把它看作第二层选择：在初次选择之后应用它，以获得更高的精确度。

使用选择器进行基本筛选

使用 .filter() 最简单的方式是提供一个 CSS 选择器字符串。它的工作方式与普通选择器相同，但只会应用于当前 jQuery 集合中已经存在的元素。

让我们先选择所有带有 .item 类的 div 元素，然后筛选出同时带有 .active 类的元素。

<!DOCTYPE html>
<html>
<head>
<title>Filter by Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <div class="item">Item 1</div>
  <div class="item active">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item active">Item 4</div>

  <script>
    $(document).ready(function(){
      // Select all divs with class 'item'
      var allItems = $('div.item');
      // Then filter to keep only those with class 'active'
      var activeItems = allItems.filter('.active');
      activeItems.css('color', 'blue');
    });
  </script>
</body>
</html>

使用函数实现自定义逻辑

传入一个函数作为参数时，.filter() 才能真正发挥作用。这样，您就可以对选择结果中的每个元素应用高度自定义的动态逻辑。

  • 该函数会针对当前 jQuery 集合中的每个元素运行。
  • 它接收两个参数：index（元素在集合中的位置）和 element（原始 DOM 元素）。
  • 返回 true 可保留元素，返回 false 则将其从筛选后的集合中移除。

按索引位置筛选

您可以在筛选函数中使用 index 参数，根据元素在当前 jQuery 集合中的位置来选择元素。这对于选择每隔一个元素或特定范围的元素等任务非常有用。

让我们选择每隔一个列表项（索引从 0 开始的偶数项），并突出显示它们。

<!DOCTYPE html>
<html>
<head>
<title>Filter by Index</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Item 0</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function(index) {
        // Keep items at even indices (0, 2, 4...)
        return index % 2 === 0;
      }).css('background-color', 'lightgreen');
    });
  </script>
</body>
</html>

根据属性和特性筛选

element 参数（或函数内部的 $(this)）可以让您检查每个 DOM 元素的特性、属性或文本内容，从而实现高度精确的筛选。

在这里，我们将查找文本中包含“Important”一词的所有列表项，并将它们设为粗体。

<!DOCTYPE html>
<html>
<head>
<title>Filter by Property</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Task 1</li>
    <li>Important Task 2</li>
    <li>Task 3</li>
    <li>Another Important Task 4</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the text content includes "Important"
        return $(this).text().includes('Important');
      }).css('font-weight', 'bold');
    });
  </script>
</body>
</html>

使用数据进行动态筛选

HTML5 数据属性（例如 data-status="active"）非常适合直接在元素中存储额外的、特定于应用的信息。您可以使用 .filter()，根据这些自定义数据值来选择元素。

让我们使用列表项的 data-status 属性，突出显示标记为“complete”的列表项。

<!DOCTYPE html>
<html>
<head>
<title>Filter by Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li data-status="pending">Task A</li>
    <li data-status="complete">Task B</li>
    <li data-status="pending">Task C</li>
    <li data-status="complete">Task D</li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check the 'data-status' attribute
        return $(this).data('status') === 'complete';
      }).css('text-decoration', 'line-through');
    });
  </script>
</body>
</html>

按子元素或父元素筛选

您的筛选函数还可以检查元素之间的关系。例如，您可能希望选择包含特定子元素的父元素，反之亦然。

在这里，我们将查找其中包含 <img> 标签的列表项，并为它们添加边框。

<!DOCTYPE html>
<html>
<head>
<title>Filter by Relationship</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li>Text only</li>
    <li>Item with <img src="https://placehold.co/16x16" alt="icon"></li>
    <li>Another text item</li>
    <li>Item with another <img src="https://placehold.co/16x16" alt="image"></li>
  </ul>

  <script>
    $(document).ready(function(){
      $('li').filter(function() {
        // Check if the current <li> contains an <img>
        return $(this).find('img').length > 0;
      }).css('border', '2px solid orange');
    });
  </script>
</body>
</html>

使用逻辑实现复杂筛选

在筛选函数内部，您可以使用标准 JavaScript 逻辑运算符，例如 &&（AND）和 ||（OR），组合多个条件。

这样，您就可以同时根据多个条件进行非常精确的选择，让筛选功能更加强大：

  • 元素是否可见？并且是否具有特定类？
  • 是否包含文本“X”？或者是否具有数据属性“Y”？

现实场景中的动态筛选

让我们综合运用所学内容。设想一下，根据多个条件筛选产品列表。您的筛选函数可以动态检查多个条件。

此示例使用筛选函数中的组合逻辑，突出显示同时可见且属于“electronics”类别的产品。

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .hidden { display: none; }
</style>
</head>
<body>
  <div class="product" data-category="electronics">Laptop</div>
  <div class="product hidden" data-category="books">Novel</div>
  <div class="product" data-category="electronics">Mouse</div>
  <div class="product" data-category="books">Textbook</div>

  <script>
    $(document).ready(function(){
      $('div.product').filter(function() {
        // Filter products that are visible AND in 'electronics' category
        var isVisible = $(this).is(':visible');
        var isElectronics = $(this).data('category') === 'electronics';
        return isVisible && isElectronics;
      }).css('background-color', 'lightblue');
    });
  </script>
</body>
</html>

筛选挑战

给定以下 HTML：<li class="item special" data-value="10">...</li>，哪个 .filter() 函数能够正确地仅选择同时具有 .special 类且 data-value 大于 5 的 <li> 元素？

在交互式课程中回答

回顾：动态筛选的强大功能

现在，您已经掌握了 jQuery .filter() 方法的高级用法！

  • 它可以优化现有选择，让您进行精确控制。
  • 使用函数可以实现动态且复杂的筛选逻辑。
  • 您可以检查索引、元素特性、数据属性以及元素之间的关系。
  • 使用 &&（AND）和 ||（OR）组合多个条件，以实现高度具体的筛选标准。

这个强大的方法可以帮助您创建响应迅速、由数据驱动的用户界面。

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
22
课程
48
免费开始学习查看完整课程

常见问题解答

「使用 .filter() 进行高级筛选」课时是免费的吗？

是的 — 「使用 .filter() 进行高级筛选」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「使用 .filter() 进行高级筛选」这节课中我会学到什么？

探索 .filter() 方法的完整能力，使用函数应用自定义逻辑，并根据动态属性或关系选择元素。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。

「使用 .filter() 进行高级筛选」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 构建自定义伪选择器
  2. 使用 .filter() 进行高级筛选
  3. 使用 .not() 排除元素
← 返回 jQuery Academy