Los filtros jQuery es una manera de filtrar las selecciones basadas en ciertas características. Además, puedes encontrar elementos con etiquetas particulares, texto específico, elementos que están escondidos a la vista e incluso elementos que no coinciden con el selector principal.
Para usar los filtros jQuery, se añaden 2 puntos, seguidos del nombre del filtro y después del selector principal.
Por ejemplo, seleccionar todas las filas pares de un tabla:
|
1 |
$(‘tr:even’) |
Este código seleccionará todos los <tr> pares. Para reducir la selección, podríamos indicar que busque las filas pares que tengan la clase destacado.
|
1 |
$(‘.destacado tr:even’) |
Even y odd
:even y :odd seleccionan los elementos pares e impares respectivamente. Estos filtros tienen la curiosidad de ser contradictorios. Los elementos en jQuery tienen un número de índice como un array y como tal empiezan por 0. Por tanto si usas el filtro :even te devolvería números de índice pares como ejemplo (0, 2 y 4). Sin embargo, te estaría devolviendo el primer elemento, el 3º elemento, el 5ª y seguiría así. Lo mismo sucede con el filtro :odd pero a la inversa.
First y last
:first y :last permiten seleccionar el primer y último elemento en un grupo. Por ejemplo, quieres seleccionar el primer <li> de una lista
|
1 |
$('ul li:first'); |
Y para el último sería algo así
|
1 |
$('ul li:last'); |
Función not()
Puedes usar el filtro :not() para encontrar elementos que no coincidan con un selector en particular. Por ejemplo, quieres seleccionar todos los <a> salvo los que tengan la clase navegación.
|
1 |
$('a:not(.navegacion)'); |
El parámetro de la función :not() es el nombre del selector que quieres ignorar. En este caso, .navegacion es un selector de clase, y el código traduce esto como todos los enlaces que no tengan las clase .navegación. Puedes usar este filtro para otros selectores, como por ejemplo atributos.
|
1 |
$('a:not([href^="http://"])') |
Esto selecciona todos los <a> cuyo atributo href no comience por http://.
Si quieres recordar los selectores en jQuery te recomiendo los post sobre los básicos y avanzados de este blog.
Función has()
:has() Encuentra los elementos que tengan un selector. Por ejemplo, quieres seleccionar todos los <li> que contengan un elemento <a> dentro de ellos.
|
1 |
$('li:has(a)'); |
No hay que confundirlo con un selector descendiente. Ya que el descendiente seleccionaría el elemento <a>, en este caso sólo se seleccionan los <li> que tengan un <a> dentro.
Función contains
:contains() encuentra elementos con un texto específico. Por ejemplo, encontrar todos los párrafos que contengan la frase «hola mundo».
|
1 |
$('p:contains(hola mundo)'); |
Hidden y visible
:hidden localiza los elementos que están ocultos. Esto incluye los elementos que tienen el atributo display en none, los elementos escondidos con la función jQuery hide(), elementos con ancho y alto a 0 y campos ocultos de formulario pero, no se aplica a elementos con la propiedad visibility en invisible. Un caso sería que has ocultado los elementos de una lista, si quieres hacerlos visibles tendrías que usar el siguiente código
|
1 |
$('li:hidden').show(); |
En cuanto visible :visible es el contrario del filtro :hidden. Localiza los elementos que son visibles en la página.
Y hasta aquí los filtros jQuery, espero que les saquéis partido. A seguir picando 🙂