.filter()

.filter( selector ) 返回: jQuery

描述: 筛选出与指定表达式匹配的元素集合。

  • version added: 1.0.filter( selector )

    selector选择器字符串,用于确定到哪个前辈元素时停止匹配。

  • version added: 1.0.filter( function(index) )

    function(index)一个作为每个集合中的元素测试的函数。this是当前的DOM元素。

  • version added: 1.4.filter( element )

    element一个匹配当前元素集合的元素。

  • version added: 1.4.filter( jQuery object )

    jQuery object现有匹配当前元素集合的jQuery对象。

如果一个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 ,该元素将被包含在筛选集合中;否则,将被排除在外。假设我们有一个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');

此代码只有第一个列表项将改变,因为它仅包含一个标记。用过滤函数,this是指依次的每个DOM元素。这个参数传递给函数告诉我们该DOM元素在匹配的jQuery对象集合内的索引。

我们还可以拿index传递给贯穿函数,这表明基于0的元素的位置在匹配的元素中未滤过的:

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

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

Examples:

Example: Change the color of all divs then put a border around only some of them.

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

Demo:

Example: Selects all paragraphs and removes those without a class "selected".

$("p").filter(".selected")

Example: Selects all paragraphs and removes those that aren't of class "selected" or the first one.

$("p").filter(".selected, :first")

Example: Change the color of all divs then put a border to specific ones.

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

Demo:

Example: Remove all elements that have a descendant ol element

$("div").filter(function(index) {
   return $("ol", this).length == 0;
 });
设计酷,jquery1.6 api中文手册