jQuery | filter() 与示例

介绍

jQuery 是一个流行的 JavaScript 库，用于处理 HTML 文档、事件处理、动画效果等任务。jQuery 通过选择器选择 HTML 元素，从而轻松地操纵它们。而 filter() 方法是 jQuery 中的一个筛选器，它可以选取符合条件的元素。

语法

$(selector).filter(filterFunc)

• selector：表示需要进行筛选的元素。
• filterFunc：表示一个回调函数，用于指定筛选条件。

示例

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>芒果</li>
  <li>葡萄</li>
</ul>

在这个示例中，我们有一个无序列表。我们希望筛选出其中的水果名称，以便对它们进行进一步的操作。

$("li").filter(function() {
  return ["苹果", "香蕉", "橙子", "芒果", "葡萄"].includes($(this).text());
}).css("color", "red");

通过这段代码，我们选择了所有的 <li> 元素，并使用 filter() 方法将它们筛选出来。在回调函数中，我们使用 includes() 方法（ES6 中的语法）返回元素是否包含于指定的数组中。如果是，就将它们的颜色设置为红色。

结论

filter() 方法提供了一个快速简便的方法来筛选 HTML 元素，使得可以对它们进行进一步的操作。通过对回调函数的编写，可以将筛选条件应用于选择器所选元素的上下文中，从而进行灵活而高效的操作。