Seleccionar elementos con el uso de los filtros jQuery

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:

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.

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

Y para el último sería algo así

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.

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.

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.

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».

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

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 🙂