• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 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对象的子集。所提供的选择器是对每个元素进行测试;这个选择器匹配的所有元素将包含在结果中。

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

    <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的索引)。

    Using a Filter Function(使用过滤函数)

    这种方法的第二种形式允许我们使用一个函数,而不是一个选择器来过滤元素,对于每个元素,如果函数返回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');
    

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

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

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

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

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

    例子:

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

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { width:60px; height:60px; margin:5px; float:left;border:2px white solid;}
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
    

    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="https://www.lanmper.cn/static/js/jquery-3.5.0.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"的元素。

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

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

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

    上篇:not()

    下篇:odd()