加载中...

filter()

概述    .filter( selector )

返回值：jQuery

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

  • V : 1.0.filter( selector )

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

  • V : 1.0.filter( function(index) )

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

  • V : 1.4.filter( element )

    • element
      类型: Element
      一个或多个DOM元素来匹配当前元素集合。

  • V : 1.4.filter( jQuery object )

    • jQuery object
      类型: Object
      现有jQuery对象，用于进一步筛选当前元素集合。

如果一个jQuery对象表示一个DOM元素的集合，.filter()方法构造了一个新的jQuery对象的子集。所提供的选择器是对每个元素进行测试;这个选择器匹配的所有元素将包含在结果中。

考虑一个页面上一个简单的列表： 

  1. <ul>
  2.   <li>list item 1</li>
  3.   <li>list item 2</li>
  4.   <li>list item 3</li>
  5.   <li>list item 4</li>
  6.   <li>list item 5</li>
  7.   <li>list item 6</li>
  8. </ul>

我们可以在列表项目上设置此方法： 

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

该调用的结果是1，3，和5项的背景变为红色，因为他们匹配这个选择器（记得:even 和 :odd使用基于0的索引）。

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

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

  1. <ul>
  2.   <li><strong>list</strong> item 1 -
  3.     one strong tag</li>
  4.   <li><strong>list</strong> item <strong>2</strong> -
  5.     two <span>strong tags</span></li>
  6.   <li>list item 3</li>
  7.   <li>list item 4</li>
  8.   <li>list item 5</li>
  9.   <li>list item 6</li>
  10. </ul>

我们可以选择列表项，然后过滤它们的内容： 

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

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

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

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

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

注意: 当一个CSS选择器字符串被传递给 .filter()时，在过滤过程中，文字和注释节点将始终从得到的jQuery对象中被删除。 当提供一个特定的节点或节点的数组时，只有当它匹配过滤数组中节点之一的时候，文本或注释节点将被包含在得到的jQuery对象中。

示例

实例

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.   div { width:60px; height:60px; margin:5px; float:left;
  6.         border:2px white solid;}
  7.   </style>
  8.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  9. </head>
  10. <body>
  11.   <div></div>
  12.  
  13.   <div class="middle"></div>
  14.   <div class="middle"></div>
  15.   <div class="middle"></div>
  16.   <div class="middle"></div>
  17.  
  18.   <div></div>
  19. <script>
  20.  
  21.     $("div").css("background", "#c8ebcc")
  22.             .filter(".middle")
  23.             .css("border-color", "red");
  24. </script>
  25.  
  26. </body>
  27. </html>

运行一下

实例

C改变所有 div 的颜色，然后为第二个 div (index == 1) 及 id 为 "fourth" 的 div 添加边框。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.   div { width:60px; height:60px; margin:5px; float:left;
  6.         border:3px white solid; }
  7.   </style>
  8.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  9. </head>
  10. <body>
  11.  
  12.   <div id="first"></div>
  13.   <div id="second"></div>
  14.   <div id="third"></div>
  15.  
  16.   <div id="fourth"></div>
  17.   <div id="fifth"></div>
  18.   <div id="sixth"></div>
  19. <script>
  20.     $("div").css("background", "#b4b0da")
  21.             .filter(function (index) {
  22.                   return index == 1 || $(this).attr("id") == "fourth";
  23.                 })
  24.             .css("border", "3px double red");
  25.  
  26. </script>
  27.  
  28. </body>
  29. </html>

运行一下

实例

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

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

实例

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

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

还没有评论.