Volvemos a hablar de JQuery y seguimos con los selectores (aunque ya queda poco). Hoy vamos a ver los selectores que se basan en la posición de un objeto dentro del árbol del DOM de la página. Recordar que para poder seleccionar un conjunto de elementos, lo hacemos mediante la función $ (alias del objeto JQuery). Esta función tiene 4 usos principales:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
  • Selección básica con selectores CSS.
  • Selecciones por medio de atributos, hijos y contenedores.
  • Selecciones por medio de la posición.
  • Selecciones gracias a los selectores que nos proporciona JQuery.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Seleccionando un conjunto de objetos del DOM en función de la posición.

Algunas veces, nos vamos a encontrar con la tesitura de querer seleccionar un conjunto de objetos del DOM, en función de la posición que tienen en la página o en función de la relación que tienen con otros objetos.

JQuery, nos proporciona una serie selectores para poder realizar estas selecciones. Los selectores más básicos de este grupo son los siguientes:

• :first: Selecciona el primer objeto (en función de un tipo de objeto) que encuentre en la página.
• :last: Selecciona el último objeto (en función de un tipo de objeto) que encuentre en la página.
• :first-child: Selecciona el primer elemento de un tipo.
• :last-child: Selecciona el último elemento de un tipo.
• :nth-child(n): Devuelve el objeto cuyo index coincida con n (recuerda que aunque los index empiecen generalmente en 0, aquí empiezan con 1).
• :nth-child(even | odd): Devuelve los objetos pares o impares en función de un tipo.

Visto, esto, veamos ahora algunos ejemplos. Supongamos que queremos seleccionar el primer elemento de cada lista, pues la tarea sería sumamente sencilla. La sintaxis sería la siguiente:

li:first

Y si quisiéramos seleccionar el último elemento, sería algo así:

li:last

Como veis, esto es muy sencillo, lo que yo os recomiendo es que para ver cada uno de estos selectores en detalle, os bajéis el laboratorio que he creado para poder testearlo y así podréis probar comandos del tipo li:first, li:last, li:first-child, li:last-child, li:nth-child(2), li:nth-child(even).

Si con estos selectores, no podemos realizar todas las operaciones de selección que necesitamos, JQuery nos proporciona otros, que siendo de las misma naturaleza son más potentes todavía. Estos son los siguientes:

• :nth-child(Xn+Y): Nos devolverá todos los objetos cuyo index haga macthing con la formula.
• :even y dd: Selecciona los elementos impares y pares en función de un tipo de elemento.
• :eq(n): Selecciona el objeto cuyo itemIndex coincide con n.
• :gt(n): Selecciona todos los objetos cuyo itemIndex sea mayor que n.
• :lt(n): Selecciona todos los elementos cuyo itemIndex sea menor que n.

Estos selectores como he dicho nos van a dar una gran flexibilidad, por ejemplo si aplicamos li:even, nos va a devolver todos los li impares y si aplicamos li:odd, nos devolverá todos los pares. Si aplicamos li:nth-child(5n+1) nos devolverá los li cuyo itemIndex (dentro de la lista) sea 6.

Posts relacionados.

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
  • Selección básica con selectores CSS.
  • Selecciones por medio de atributos, hijos y contenedores.
  • Selecciones por medio de la posición.
  • Selecciones gracias a los selectores que nos proporciona JQuery.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Descargas – Downloads

• Como ya he dicho todo esto es muy potente, y para probarlo lo mejor es que os bajéis el laboratorio con el cual yo he entendido el funcionamiento, ahí podéis ir aplicando selectores, podéis anidarlos y sobre todo podéis ver la potencia que tiene todo esto.

Y sigo con Joy Division, grandes y geniales. Yo os dejo, que este finde me toca ir al pueblo a arrancarle las patatas a mi padre.