jQuery | filter() 与示例

概述

jQuery 的 filter() 方法用于从匹配元素集合中筛选出符合指定条件的元素，返回匹配元素集合中符合条件的子集。

语法

$(selector).filter(filter)

• selector：要筛选的元素的选择器字符串或元素数组。
• filter：为 String、Function 或 jQuery 对象类型的参数。若为 String 类型，将被视为 CSS 选择器字符串；若为 Function 类型，则会对集合中的每个元素进行测试，若返回 true，则保留该元素；若为 jQuery 对象类型，则其内部元素会被添加到筛选结果中。

示例

筛选出匹配元素集合中的偶数元素

$( "div" ).filter( ":even" ).css( "background-color", "lightblue" );

此示例通过将选择器 ":even" 传入 filter() 方法，筛选出匹配元素集合中的偶数元素，并修改其 CSS 属性 "background-color"。

根据函数筛选元素

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

此示例通过传入一个函数作为 filter() 方法的参数，根据元素在集合中的索引筛选出每个第3个元素，并修改其 CSS 属性 "background-color"。

根据其他 jQuery 对象筛选元素

var $smallDivs = $( "div" ).filter( function() {
  return $( this ).width() < 100;
});
$( "span" ).text( "Found " + $smallDivs.length + " elements." );

此示例将匹配元素集合中所有宽度小于 100 像素的元素筛选出来，返回一个 jQuery 对象。然后，可以用 length 属性来遍历该对象并进行一些操作。

结论

使用 filter() 方法可以轻松地从匹配元素集合中筛选出所需元素子集。 可以使用 CSS 选择器、函数或其他 jQuery 对象来指定筛选条件。