当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .filter()用法及代码示例


用法 
.filter( selector ) => jQuery

说明：将匹配元素的集合减少为匹配选择器或通过函数测试的元素。

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

    • selector
      类型：Selector
      一个包含选择器表达式的字符串，用于匹配当前的元素集。

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

    • function
      类型：Function(Integer 索引，Element 元素)=> Boolean
      用于测试集合中每个元素的函数。 this 是当前的 DOM 元素。

  • 添加的版本：1.4.filter( elements )

    • elements
      类型：Element
      一个或多个 DOM 元素来匹配当前的一组元素。

  • 添加的版本：1.4.filter( selection )

    • selection
      类型：jQuery
      一个现有的 jQuery 对象来匹配当前的元素集。

给定一个表示一组 DOM 元素的 jQuery 对象，.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( ":nth-child(2n)" ).css( "background-color", "red" );

此调用的结果是项目 2、4 和 6 的红色背景，因为它们与选择器匹配。

使用过滤器函数

该方法的第二种形式允许我们根据函数而不是选择器过滤元素。对于每个元素，如果函数返回true(或"truthy" 值)，则该元素将包含在过滤集中；否则，它将被排除在外。假设我们有一个更复杂的 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 元素。传递给函数的参数告诉我们该 DOM 元素在 jQuery 对象匹配的集合中的索引。

我们还可以利用通过函数传递的index，它指示元素在未过滤的匹配元素集中的从 0 开始的位置：

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

对代码的这种更改将导致第三个和第六个列表项被突出显示，因为它使用模运算符 (%) 选择具有 index 值的每个项目，当除以 3 时，余数为 2 。

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

例子：

更改所有div的颜色；然后为具有"middle" 类的对象添加边框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>filter demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 2px white solid;
  }
  </style>
  <script src="https://code.jquery.com/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>

演示：

更改所有div的颜色；然后为第二个(索引== 1)和ID为"fourth."的div添加边框

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>filter demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 3px white solid;
  }
  </style>
  <script src="https://code.jquery.com/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" ) );

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .filter()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。