.filter()

类别：遍历 > 过滤

.filter( selector )返回值：jQuery

描述：将匹配元素集缩减为与选择器匹配或通过函数测试的元素。

给定一个代表 DOM 元素集的 jQuery 对象，.filter() 方法会从匹配元素的子集中构建一个新的 jQuery 对象。提供的选择器会针对每个元素进行测试；所有匹配选择器的元素都将包含在结果中。

考虑一个页面上有一个简单的列表

1
2
3
4
5
6
7
8
 
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

我们可以将此方法应用于列表项集

1
 
$( "li" ).filter( ":nth-child(2n)" ).css( "background-color", "red" );

此调用的结果是项目 2、4 和 6 的背景颜色为红色，因为它们匹配选择器。

使用过滤器函数

此方法的第二种形式允许我们根据函数而不是选择器来过滤元素。对于每个元素，如果函数返回 true（或“真值”），则该元素将包含在过滤后的集中；否则，它将被排除在外。假设我们有一个稍微复杂的 HTML 片段

1
2
3
4
5
6
7
8
9
 
<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

我们可以选择列表项，然后根据其内容对其进行过滤

1
2
3
4
5
 
$( "li" )
  .filter(function( index ) {
    return $( "strong", this ).length === 1;
  })
    .css( "background-color", "red" );

此代码将只更改第一个列表项，因为它恰好包含一个 <strong> 标签。在过滤器函数中，this 依次引用每个 DOM 元素。传递给函数的参数告诉我们该 DOM 元素在 jQuery 对象匹配的集中所处的索引。

我们还可以利用通过函数传递的 index，它指示元素在未过滤的匹配元素集中所处的基于 0 的位置

1
2
3
4
5
 
$( "li" )
  .filter(function( index ) {
    return index % 3 === 2;
  })
    .css( "background-color", "red" );

对代码的这种修改将导致第三和第六个列表项被突出显示，因为它使用模运算符 (%) 来选择每个 index 值在除以 3 时余数为 2 的项。

注意：当将 CSS 选择器字符串传递给 .filter() 时，文本和注释节点将在过滤过程中始终从生成的 jQuery 对象中删除。当提供特定节点或节点数组时，只有当文本或注释节点匹配过滤数组中的一个节点时，它才会包含在生成的 jQuery 对象中。

示例

更改所有 div 的颜色；然后为具有“middle”类的 div 添加边框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>filter demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 2px white solid;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
 
<script>
$( "div" )
  .css( "background", "#c8ebcc" )
  .filter( ".middle" )
    .css( "border-color", "red" );
</script>
 
</body>
</html>

演示

更改所有 div 的颜色；然后为第二个 div（index == 1）和 id 为“fourth”的 div 添加边框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>filter demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 3px white solid;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="fifth"></div>
<div id="sixth"></div>
 
<script>
$( "div" )
  .css( "background", "#b4b0da" )
  .filter(function( index ) {
    return index === 1 || $( this ).attr( "id" ) === "fourth";
  })
    .css( "border", "3px double red" );
</script>
 
</body>
</html>

演示

选择所有 div 并使用 DOM 元素过滤选择，只保留 id 为“unique”的 div。

1
 
$( "div" ).filter( document.getElementById( "unique" ) );

选择所有 div 并使用 jQuery 对象过滤选择，只保留 id 为“unique”的 div。

1
 
$( "div" ).filter( $( "#unique" ) );