jQuery es una herramienta muy poderosa que nos ayuda a incorporar una variedad de métodos transversales DOM para seleccionar elementos en un documento al azar o en orden secuencial. La mayoría de los métodos transversales del DOM no modifican los elementos, mientras que los filtran según las condiciones dadas.
El método filter() se usa para filtrar todos los elementos que no coinciden con los criterios seleccionados y se devolverán esas coincidencias.
Sintaxis:
$(selector).filter(criteria, function(index))
Parámetros:
criterio: especifica una expresión de selector, un objeto jQuery o uno o más elementos que se devolverán de un grupo de elementos seleccionados.
función (índice): especifica una función para ejecutar para cada elemento en el conjunto. Si la función devuelve verdadero, el elemento se mantiene. De lo contrario, se elimina.
índice: La posición de índice del elemento en el conjunto.
NOTA: Para especificar más de un criterio, utilice una coma.
Código #1:
Este código devolverá todos los elementos que coincidan con los criterios seleccionados.
<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>
Salida: 
Código #2:
Este código seleccionará los elementos que coincidan con los criterios verificados por la función. Aquí, la función busca dos elementos en una lista y devuelve verdadero o falso.
<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>
Producción:
Publicación traducida automáticamente
Artículo escrito por _shreya_garg_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA