返回值:jQueryfilter(selector)

在匹配的元素集合中，根据指定的选择器或函数进一步筛选所匹配的元素。

若一个 jQuery 对象代表了一个 DOM 元素集合，.filter() 方法会构造一个新的 jQuery 对象，用于存放筛选后的元素。所提供的选择器，会用于测试匹配集合中的每一个元素。所有满足指定的选择器的元素都会包含在结果集中。

例如，在页面中有如下一个简单的列表：

<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>

我们可以在列表项集合中应用此方法：

  $('li').filter(':even').css('background-color', 'red');

执行完上述方法的结果是，满足选择器的第 1, 3, 5 个列表项的背景色变成了红色(:even 和 :odd 的索引值是从 0 开始的)。

使用过滤函数

除了可以指定选择器外，该方法的第二种形式还允许我们使用一个过滤函数。对于匹配集合中的每一个元素，若过滤函数返回 true (或者是 "truthy"（代表真的值）)，那么该元素就会包含在最终的返回结果中，否则，不会包含该元素。假设我们有一个稍微复杂点儿的 HTML 片段： 

<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>

我们可以先选择出列表项，然后再根据它们的内容作进一步筛选：

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

上述代码只会改变第一个列表项的背景色，因为只有第一个列表项仅含有一个 <strong> 标签。在过滤函数中 this 指向的是当前正在处理的 DOM 元素。过滤函数中传入的 index 参数代表匹配的 jQuery 对象集合中 DOM 元素的索引。

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

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

上述代表会将第三个和第六个列表项高亮显示，因为该函数内使用了模运算符(%)来选择那些 index 被 3 整除余 2 的列表项。

示例:

改变所有 div 的颜色，然后为含有 "middle" 样式的 div 添加边框。

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:5px; float:left;
        border:2px white solid;}
  </style>
<script src="jquery.min.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 添加边框。

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:5px; float:left;
        border:3px white solid; }
  </style>
<script src="jquery.min.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" 的元素。

jQuery 代码:
$("div").filter( document.getElementById("unique") )

示例:

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

jQuery 代码:

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