Seleccionar elementos con Filtros

Aparte de poder acceder a los diferentes elementos del DOM mediante las formas corrientes (ver selectores básicos y selectores jerárquicos), muy similares a CSS, JQUERY enumera todos los elementos y por tanto podemos acceder a ellos de una forma sencilla mediante una serie de filtros como el primero, el último, elementos pares, etc.

Filtros que facilitan el acceso al DOM

• Selecciona el primer elemento. $(‘p:first’).
• Selecciona el último elemento. $(‘p:last’).
• Selecciona los elementos pares. $(‘p:even’).
• Selecciona los elementos impares. $(‘p:odd’).
• Selecciona un elemento concreto. $(‘p:eq(3)’).
• Selecciona los elementos siguientes a partir de uno concreto. $(‘p:gt(3)’).
• Selecciona los elementos anteriores a partir de uno concreto. $(‘p:lt(3)’).
• Selecciona todos los encabezados (Headers – h1,h2,h3,h4,h5,h6). $(‘:header’).
• Selecciona todos los elementos excepto los indicados. $(‘p:not(.ej3)’).
• Selecciona los elementos indicados en la posición establecida. $(‘p:nth-of-type(2)’) → este ejemplo funciona igual que: eqPero en este caso podemos aplicarle una formula para que la posición se inicie cada vez. Por ejemplo, queremos seleccionar todos los elementos cada 4 elementos: $(‘p:nth-of-type(4n+0)’). En este caso el 0 indica desde que elemento comenzamos, en este ejemplo seleccionaría primero el 3er elemento, si en vez de 0 ponemos un 2, el primer elemento en seleccionarse será el segundo, y el siguiente el 6º.
• Selecciona los elementos indicados en la posición establecida pero de abajo hacia arriba. $(‘p:nth-last-of-type(2)’).El funcionamiento es igual que el anterior solo que comienza a contar los elementos por abajo.

Filtros hijos

• Selecciona el primer hijo. $(‘p a:first-child’). A diferencia de :first devuelve todos los hijos de todos los padres.
• Selecciona el último hijo. $(‘p a:last-child’).
• Selecciona el hijo en la posición indicada. $(‘p a:nth-child(2)’).
• Selecciona hijos pares. $(‘p a:nth-child(even)’).
• Selecciona hijos impares. $(‘p a:nth-child(odd)’).
• Selecciona hijos únicos. $(‘p a:only-child’). Selecciona solo los párrafos con 1 enlace.

Filtros de contenido

• Seleccionar un elemento en función de un texto. $(‘p:contains(“texto”)’). Selecciona todos los párrafos que contienen el texto TEXTO.
• Selecciona un elemento sin elementos (hijos) ni texto. $(‘p:empty’).
• Selecciona los elementos padre. $(‘p:parent’).
• Selecciona los elementos que contienen otros elementos especificados. $(‘p:has(a)’). Selecciona los párrafos que tienen enlaces (1 o más).

Filtros por atributos

• Selecciona todos los elemento que estén ocultos (display:none;). $(‘p:hidden’).
• Selecciona todos los elementos que estén visibles. $(‘p:visible’).
• Selecciona los elementos que tienen un atributo concreto (class, id, type, etc.). $(‘p[class]’). Selecciona todos los párrafos que tienen class, sea cual sea el class.
• Selecciona todos los elementos que tienen un atributo concreto establecido. $(‘input[type=”file”]’), selecciona los input tipo file.
• Selecciona los elementos que tienen un atributo distinto del especificado, $(‘input[type!=”file”]), selecciona los inputs que no sean file.
• Selecciona los elementos con atributos que empiezan por el valor especificado. $(‘a[title^=”Novedades: ”’), selecciona todos los enlaces en los que la etiqueta title comience por Novedades: .
• Selecciona los elementos con atributos que terminan con el valor especificado. $(‘img[alt$=” :panorámica.”’)
• Selecciona los elementos con atributos que contienen el valor especificado. $(‘img[alt*=”Bilbao”’)

Filtros múltiples

Independientemente del potencial de los filtros comentados, es posible combinarlos, como por ejemplo:

$(‘a[title*=”Ejemplo1”] a[href*=”ejemplo-1”] a[class=”Ejemplo1”]’); => Solo se seleccionarían aquellos enlaces que cumplan las 3 condiciones, que el title y el href contengan el texto indicado y que tengan un class=’Ejemplo1′.

Caracteres especiales

Los caracteres que se usan para indicar instrucciones a JQUERY hay que intentar no usarlos en los textos o títulos de los atributos de los elementos. Por ejemplo el carácter *, si lo usamos en un texto JQUERY no sabe interpretarlo, por eso hay que “escaparlo” poniéndolo entre \\, ejemplo:

$('a[title*=”Ejemplo\\*1”] ');

La lista de caracteres especiales de JQUERY son:

# ; & , . + - * ~ ' : “ ! ^ $ [ ] ( ) = > | /