.filter()

类别：遍历 > 筛选

.filter( selector )返回类型：jQuery

描述：把匹配的元素集合缩小到匹配选择器或者传递函数的测试。

给定一个jQuery对象，代表DOM元素的集合，.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( ":even" ).css( "background-color", "red" );

此方法的调用结果是项目1、3和5得到红色背景，因为它们匹配选择器（调用:even和:odd使用以0为基数的索引）。

使用筛选器函数

此方法的第二种形式允许我们针对函数筛选元素，而不是针对一个选择器筛选元素。对于每个元素，如果函数返回true（或者一个“truthy”值），此元素将包含在筛选集合中，否则，它将被排除。假定我们具有一些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元素。传给函数的参数告诉我们在被jQuery对象匹配的元素集合内部，DOM的索引。

我们还可以利用传递给函数的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.jquery.com/jquery-1.10.2.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为“forth”的<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.jquery.com/jquery-1.10.2.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" ) );