Seleccionar elementos con Filtros

Home » Blog » 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:

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


Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023