jQuery中filter()方法用法实例

当我们需要从一个 jQuery 对象中筛选元素时，可以使用 filter() 方法。这个方法类似于 CSS 中的 :filter 伪类，可以根据选择器、元素、甚至函数来筛选元素。

用法说明

filter() 方法有多种用法，下面分别进行详细说明。

1. 根据选择器筛选元素

在 filter() 方法中，我们可以传入一个字符串作为参数，来根据选择器筛选元素。例如：

$( "p" ).filter( ".header" );

这个例子中，我们从所有 p 元素中筛选出类名为 header 的元素。

2. 根据元素类型筛选元素

我们还可以在 filter() 方法中传入一个 DOM 元素或者 jQuery 对象，来筛选相同类型的元素。例如：

var divs = $( "div" );
var selected = divs.filter( document.getElementById( "header" ) );

在这个例子中，我们从所有 div 元素中筛选出和 id 为 header 的元素类型相同的元素。

3. 根据函数筛选元素

最后，我们可以使用函数作为筛选条件，对元素进行筛选。例如：

$( "li" ).filter( function( index ) {
    return index % 3 === 2;
} );

在这个例子中，我们从所有 li 元素中每隔三个元素选出一个。

示范应用

下面给出两个示例，详细介绍 filter() 方法的使用：

示例一：根据选择器筛选元素

<ul>
    <li class="item">item 1</li>
    <li class="item">item 2</li>
    <li class="header item">item 3</li>
    <li class="item">item 4</li>
    <li class="header item">item 5</li>
    <li class="item">item 6</li>
</ul>

<script>
    $( "li" ).filter( ".header" ).css( "background-color", "yellow" );
</script>

在这个例子中，我们从所有 li 元素中选出类名为 header 的元素，然后将它们的背景颜色设为黄色。

示例二：根据函数筛选元素

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
</ul>

<script>
    $( "li" ).filter( function( index ) {
        return index % 3 === 2;
    } ).css( "background-color", "yellow" );
</script>

在这个例子中，我们从所有 li 元素中每隔三个元素选出一个，并将其背景颜色设为黄色。

以上就是 filter() 方法的详细说明和应用示例。