jQuery | filter（）及其示例-yiteyi-C++库

jQuery是一个非常强大的工具，它可以帮助我们结合各种DOM遍历方法来随机或按顺序选择文档中的元素。大多数DOM遍历方法不会修改元素，而是根据给定的条件过滤掉它们。 过滤器（） 方法用于筛选出与所选条件不匹配的所有元素，并将返回这些匹配项。 语法：

null

$(selector).filter(criteria, function(index))

参数： 标准： 它指定一个选择器表达式、一个jQuery对象或一个或多个要从一组选定元素返回的元素。 功能（索引）： 它为集合中的每个元素指定要运行的函数。如果函数返回true，则保留该元素。否则，它将被删除。 索引： 元素在集合中的索引位置。注意：要指定多个条件，请使用逗号。

显示filter（）方法工作的jQuery代码 代码#1：

                     <                               html                               >                   
                             
                     <                               head                               >                   
                                         <                               title                               >GEEKS FOR GEEKS ARTICLE</                               title                               >                   
                                         <                               script                               src="                       https://ajax.googleapis.com/ajax/libs/                              
                                         jquery/3.3.1/jquery.min.js"></                               script                               >                   
                                         <                               script                               type                               =                               "text/javascript"                               >                   
                                         $(document).ready(function() {                   
                                         $("li").filter(".first, .last").css("color", "red")                   
                                         .css("backgroundColor", "yellow");                   
                                         });                   
                                         </                               script                               >                   
                     </                               head                               >                   
                             
                     <                               body                               >                   
                                         <                               ul                               >                   
                                         <                               li                               class                               =                               "first"                               >GeeksForGeeks</                               li                               >                   
                                         <                               li                               class                               =                               "first"                               >GeeksForGeeks</                               li                               >                   
                                         <                               li                               class                               =                               "middle"                               >GeeksForGeeks</                               li                               >                   
                                         <                               li                               class                               =                               "last"                               >GeeksForGeeks</                               li                               >                   
                                         <                               li                               class                               =                               "last"                               >GeeksForGeeks</                               li                               >                   
                                         </                               ul                               >                   
                     </                               body                               >                   
                             
                     </                               html                               >                   

输出： 图片[1]-jQuery | filter（）及其示例-yiteyi-C++库 代码#2： 此代码将选择与函数检查的条件匹配的元素。在这里，函数检查列表中的两个元素，并返回true或false。

                     <                               html                               >                   
                             
                     <                               head                               >                   
                                         <                               title                               >GEEKS FOR GEEKS ARTICLE</                               title                               >                   
                                         <                               script                               src="                       https://ajax.googleapis.com/ajax/libs/                              
                                         jquery/3.3.1/jquery.min.js"></                               script                               >                   
                                         <                               script                               type                               =                               "text/javascript"                               >                   
                                         $(document).ready(function() {                   
                                         $("ul").filter(function() {                   
                                         return $("li", this).length == 2;                   
                                         }).css("color", "red").css("fontSize", "20");                   
                                         });                   
                                         </                               script                               >                   
                     </                               head                               >                   
                             
                     <                               body                               >                   
                                         A list with two elements:                   
                                         <                               ul                               >                   
                                         <                               li                               >option1</                               li                               >                   
                                         <                               li                               >option2</                               li                               >                   
                                         </                               ul                               >                   
                                         A list with one element:                   
                                         <                               ul                               >                   
                                         <                               li                               >option1</                               li                               >                   
                                         </                               ul                               >                   
                                         A list with two elements:                   
                                         <                               ul                               >                   
                                         <                               li                               >option1</                               li                               >                   
                                         <                               li                               >option2</                               li                               >                   
                                         </                               ul                               >                   
                                         A list with three elements:                   
                                         <                               ul                               >                   
                                         <                               li                               >option1</                               li                               >                   
                                         </                               ul                               >                   
                                         <                               ul                               >                   
                                         <                               li                               >option2</                               li                               >                   
                                         </                               ul                               >                   
                                         <                               ul                               >                   
                                         <                               li                               >option3</                               li                               >                   
                                         </                               ul                               >                   
                     </                               body                               >                   
                             
                     </                               html                               >                   

输出： 图片[2]-jQuery | filter（）及其示例-yiteyi-C++库

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript