jQuery filter() 方法

实例

返回样式类名为 "intro" 的所有 <p> 元素:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7. $("p").filter(".intro").css("background-color", "yellow");
  8. });
  9. </script>
  10. </head>
  11. <body>
  12. <h2>欢迎来到我的主页</h2>
  13. <p>我的名字是 Donald</p>
  14. <p class="intro">我居住在 Duckburg</p>
  15. <p class="intro">我爱 Duckburg</p>
  16. <p>我最好的朋友是 Mickey</p>
  17. </body>
  18. </html>

定义与用法

filter() 方法返回符合特定条件的元素。

这个方法让您可以指定条件。不符合条件的元素将从选择中删除,而符合条件的元素将被返回。

本方法通常用于缩小对一组选定元素中某个元素的搜索范围。

提示: filter() 方法与 not() 方法相反。


语法

  1. $(selector).filter(criteria,function(index))
参数描述
criteria可选。指定要从一组选定元素返回的选择器表达式、jQuery 对象或一个或多个元素
提示: 要指定多个条件,请使用逗号
function(index 可选。为集合中的每个元素指定要运行的函数。如果返回 true,则保留该元素。否则,将删除该元素
  • index - 元素在集合中的索引位置
注意:this 是当前的 DOM 元素

更多实例

删除所有偶数 <p> 元素

使用 :even 选择器和 filter() 返回所有偶数元素

多重条件过滤

如何返回类为 "intro" 且 id 为 "outro" 的所有 <p> 元素

使用 jQuery 对象

如何使用 jQuery 对象返回 <div> 元素中包含类 "intro" 的所有 <p> 元素

DOM

如何使用 DOM 元素返回 id 为 "intro" 的 <p> 元素

使用函数过滤

如何使用函数选择内部有两个 <span> 元素的所有 <p> 元素

分类导航