jQuery 中 filter 方法用法实例分析

什么是 filter 方法？

在 jQuery 中，filter 方法是用于筛选 DOM 元素的方法。它可以基于给定的条件返回一个新的集合。例如，使用 filter 方法可以筛选出表格中某一列中的所有单元格或者筛选出某一组元素中特定的元素。

filter 方法的语法

filter 方法的基本格式如下：

$(selector).filter(filterFunction)

其中，selector 是要筛选的元素，filterFunction 是定义了筛选条件的函数。

filter 方法的示例

示例 1：筛选表格中某一列中的所有单元格

在下面的 HTML 代码中，我们有一个简单的表格，其中包含三列。现在，我们想要筛选出第二列中的所有单元格，可以使用 filter 方法来实现。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>18</td>
    <td>女</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>22</td>
    <td>男</td>
  </tr>
</table>

在 jQuery 中，我们可以通过以下代码来筛选出第二列中的所有单元格：

$('table td').filter(function() {
  return $(this).index() === 1;
})

在上述代码中，$('table td') 选择了表格中所有的单元格，然后使用 filter 方法筛选出了其中索引为 1 的列（也就是第二列）中所有的单元格，最后返回一个新的集合。

示例 2：筛选出某一组元素中特定的元素

在下面的 HTML 代码中，我们有一个包含多个按钮的按钮组。现在，我们想要筛选出其中的红色按钮，可以使用 filter 方法来实现。

<div class="btn-group">
  <button class="btn btn-primary">蓝色按钮</button>
  <button class="btn btn-danger">红色按钮</button>
  <button class="btn btn-success">绿色按钮</button>
</div>

在 jQuery 中，我们可以通过以下代码来筛选出其中的红色按钮：

$('.btn-group button').filter('.btn-danger')

在上述代码中，$('.btn-group button') 选择了所有的按钮，然后使用 filter 方法筛选出其中 class 属性为 btn-danger 的按钮，最后返回一个新的集合。

总结

通过上面的两个示例，我们可以看到，在 jQuery 中使用 filter 方法可以很方便地筛选出指定的元素。不过需要注意的是，在使用 filter 方法时，我们需要定义好筛选条件，否则会返回一个空集合。