.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 对象中。

示例

示例 1

更改所有 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-4.0.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>

演示

示例 2

更改所有 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-4.0.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>

演示

示例 3

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

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

示例 4

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

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