首页
话题
消息
手册
我的
返回介绍

.filter()

发布于 2017-09-11 字数5625 浏览 958 评论 0

所属分类:遍历 > 过滤

.filter( selector )返回: jQuery

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

  • 添加的版本: 1.0.filter( selector )

    • selector
      类型: Selector

      一个用于匹配元素的选择器字符串。

  • 添加的版本: 1.0.filter( function(index) )

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

    • element
      类型: Element

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

  • 添加的版本: 1.4.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

例子:

Example: 改变所有 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://cdn.bootcss.com/jquery/1.11.2/jquery.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>

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://cdn.bootcss.com/jquery/1.11.2/jquery.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>

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

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

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

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

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!