zoukankan      html  css  js  c++  java
  • jquery .filter()过滤器

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

    • .filter( selector )

      • selector
        类型: Selector                
        一个用于匹配元素的选择器字符串。
    • .filter( function(index) )

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

      • element
        类型: Element                
        一个或多个DOM元素来匹配当前元素集合。
    • .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 - one strong tag</li>
    3   <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></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(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

    例子:

    Example: 改变所有 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   <div class="middle"></div>
    13   <div class="middle"></div>
    14   <div class="middle"></div>
    15   <div class="middle"></div>
    16   <div></div>
    17 <script>
    18     $("div").css("background", "#c8ebcc")
    19             .filter(".middle")
    20             .css("border-color", "red");
    21 </script>
    22 
    23 </body>
    24 </html>


    Example: 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   <div id="first"></div>
    12   <div id="second"></div>
    13   <div id="third"></div>
    14   <div id="fourth"></div>
    15   <div id="fifth"></div>
    16   <div id="sixth"></div>
    17 <script>
    18     $("div").css("background", "#b4b0da")
    19             .filter(function (index) {
    20                   return index == 1 || $(this).attr("id") == "fourth";
    21                 })
    22             .css("border", "3px double red"); 
    23 
    24 </script>
    25 </body>
    26 </html>

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

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

     

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

    1
    $("div").filter( $("#unique") )
  • 相关阅读:
    HDU 1114 Piggy-Bank
    HDU 2955 Robberies
    NTOJ 290 动物统计(加强版)
    POJ 3624 Charm Bracelet
    HDU 2602 Bone Collector
    POJ 1523 SPF(无向图割顶)
    HDU 5311 Hidden String
    HDU 1421 搬寝室
    HDU 1058 Humble Numbers
    POJ 3259 Wormholes(spfa判负环)
  • 原文地址:https://www.cnblogs.com/gates/p/4303262.html
Copyright © 2011-2022 走看看