对于每个元素.  如果函数返回 true. 那就包含这个元素. 如果函数返回 false 那就排除这个元素

请看下面这段稍显复杂的 HTML 片段: <ul> <li>list item 1 - one strong tag</li> <li>list item 2 - two strong tags</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="http://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>

Example: C改变所有 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="http://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>

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

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

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

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