Trabajando con elementos en jQuery: Selección por posición

Explicamos como seleccionar elementos de nuestro documento basándonos en su posición y orden.

En algunas ocasiones, se puede presentar el caso en que necesitemos seleccionar elementos en base a su posición dentro de la página web o su relación con otros elementos. jQuery nos proporciona los mecanismos necesarios para lograr dicha clase de selección específica, con ello podremos lograr la selección de elementos como el primer enlace de la página, el último elemento de una lista o cada uno de los párrafos que la conforman.

Por ejemplo, si buscamos una forma de crear un selector que nos devuelva el primer enlace de nuestro sitio podemos recurrir a la misma sintaxis que CSS nos proporciona, utilizar los dos puntos “:” después del nombre de la etiqueta y especificar la posición del elemento, en nuestro caso sería algo así:

a:first

Este formato coincide la descripción dicha y nos devolverá el elemento envuelto para poder realizar operaciones con él. Ahora planteémonos algo un poco más complejo, supongamos que queremos todos los párrafos que estén en posiciones impares dentro del sitio, realizar esto con únicamente HTML o JavaScript nativo puede llevarnos un tiempo, sin embargo con jQuery basta con agregar una sentencia como la siguiente:

p:odd

Mientras que para obtener los párrafos en posiciones pares usamos:

p:even

Como podemos observar basta con indicar el nombre de la etiqueta, los dos puntos y la palabra en inglés para la posición, obviamente no podemos inventar posiciones ni dar palabras que no esten registradas pero por intuición podemos obtener los nombres.

Así también podemos especificar los elementos que están uniformemente ordenados, por lo tanto si queremos un selector que equivalga al último elemento de una lista definimos algo como lo siguiente:

li:last-child

Y por conclusión para obtener el primer elemento el selector sería:

li:first-child

En estos casos nos regresaría el primer y último elemento de todas las listas con las que cuenta la página si queremos ser más específicos podemos utilizar lo identificadores o las clases.

Pero que pasa si no queremos ni el primero ni el último elemento, queremos los elementos de una posición específica, para ello usamos :nth-child(n) donde n representa el número de elemento que queremos recuperar. Por ejemplo, si usamos:

li:nth-child(3)

Nos regresará el tercer elemento de cada lista, ya que el selector “nth-child” empieza a contar a partir de 1 y no a partir de 0 como comúnmente se utiliza en programación. Vale aclarar que a “nth-child” también se le puede dar como parámetro la palabra “odd” o “even” que nos devolverán los elementos impares y pares de las listas.

Indaguemos un poco más, sigamos este ejemplo, crearemos una tabla con nombres y datos de algunos países de habla hispana.

<table id="paises">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Capital</th>
      <th>Moneda</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>México</td>
      <td>Ciudad de México</td>
      <td>Peso</td>
    </tr>
    <tr>
      <td>España</td>
      <td>Madrid</td>
      <td>Euro</td>
    </tr>
    <tr>
      <td>Venezuela</td>
      <td>Caracas</td>
      <td>Bolivar</td>
    </tr>
    <tr>
      <td>Perú</td>
      <td>Lima</td>
      <td>Sol</td>
    </tr>
  </tbody>
</table>

Digamos que queremos obtener todos los nombres de los países que se encuentran en la tabla, para ello obtenemos el valor de las celdas, y ya que todas son las primeras de cada fila basta con utilizar el siguiente selector:

table#paises tbody td:first-child

O también podemos utilizar:

table#paises tbody td:nth-child(1)

Para obtener la capital de cada país simplemente utilizaríamos :nth-child(2) y para obtener la moneda :nth-child(3).

A pesar de que los selectores CSS que hemos examinado hasta ahora son increíblemente poderosos, en los siguientes artículos vamos a escribir y explicar de que manera podemos exprimir aún más el poder de los selectores de jQuery.