# .filter()

所属分类：遍历 > 过滤 英文文档：.filter()

## .filter( selector )返回: jQuery

描述: 筛选元素集合中匹配表达式 或 通过传递函数测试的 那些元素集合。

- #### 添加的版本: 1.0.filter( selector )

  - selector
    类型: Selector
    一个用于匹配元素的选择器字符串。

- #### 添加的版本: 1.0.filter( function(index) )

  - function(index)
    类型: Function()
    一个函数用作测试集合中的每个元素。`this` 是当前DOM元素。

- #### 添加的版本: 1.4.filter( element )

  - element
    类型: Element
    一个匹配当前元素集合的元素。

- #### 添加的版本: 1.4.filter( jQuery object )

  - jQuery object
    类型: Object
    现有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的索引）。

#### Using a Filter Function（使用过滤函数）

这种方法的第二种形式允许我们使用一个函数，而不是一个选择器来过滤元素，对于每个元素，如果函数返回`true` ，该元素将被包含在筛选集合中;否则，将被排除在外。假设我们有一个HTML片段：

1 2 3 4 5 6 7 8 9 10 |
    <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 |
    $('li').filter(function(index) {  return $('strong', this).length == 1;}).css('background-color', 'red');

此代码只有第一个列表项将改变，因为它仅包含一个`<strong>`标签。过滤函数中的`this`是依次指向每个DOM元素。过滤函数中传入的 index 参数代表匹配的 jQuery 对象集合中 DOM 元素的索引。

我们可以利用过滤函数中的 `index` 参数，该参数是从 0 开始的索引值，此索引值代表未经过滤的匹配元素集合中的元素位置：

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

这对代码将会导致第三和第六列表项背景变为红色，因为它使用模运算符（ `%` ）选择每一个项目和`index`值，除以3时，余`2` 。

## 例子:

#### Example: 改变所有 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 |
    <!DOCTYPE html><html><head>  <style>  div { width:60px; height:60px; margin:5px; float:left;        border:2px white solid;}  </style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

#### Example: C改变所有 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 |
    <!DOCTYPE html><html><head>  <style>  div { width:60px; height:60px; margin:5px; float:left;        border:3px white solid; }  </style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

#### Example: 选择所有的 div，并使用 DOM 元素进行筛选，过滤出 id 为 "unique" 的元素。

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

#### Example: 选择所有的 div，并使用 jQuery 对象进行筛选，过滤出 id 为 "unique" 的元素。

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