Control de elementos con index – jQuery

Posteado Por Catrian

Con jQuery, se pueden controlar los elementos de una serie de muchas formas, index() provee una funcionalidad con la cual se pueden contar los elementos adyacentes a otro en una serie.

Tomemos como ejemplo la siguiente estructura HTML:

1. <ul>
2. <li>texto 1</li>
3. <li>texto 2</li>
4. <li>texto 3</li>
5. <li>texto 4</li>
6. <li>texto 5</li>
7. <li>texto 6</li>
8. <li>texto 7</li>
9. </ul>

 

En esta serie, cada uno de los elementos <li> tiene un index, representado por un número de 0 a la cantidad de elementos que se encuentren en la serie, en este caso, de 0 a 6.

Ahora, si queremos agregar un estilo específico al elemento que está después del <li> con contenido Texto 4, vamos a agregar el siguiente código jQuery:

1. var index = $(‘li’).index();
2. $(‘li’).eq(4).css({‘color’:’#f7f7f7′});

Para explicar el código anterior, tenemos:

1. Definimos una variable ‘index’ que guardará el valor del index de todos los elementos de la serie
2. Le indicamos al elemento con el index 4 que su contenido tendrá un color de texto gris claro

 

Pero ¿qué pasa si lo que queremos es automatizar un poco nuestro código y hacer que para un determinado elemento se realicen acciones para los elementos adyacentes?

Pues bien, podemos tener la siguiente serie:

1. <ul>
2. <li>texto 1</li>
3. <li>texto 2</li>
4. <li>texto 3</li>
5. <li class=»activo»>texto 4</li>
6. <li>texto 5</li>
7. <li>texto 6</li>
8. <li>texto 7</li>
9. </ul>

Queremos que tanto el elemento anterior como el siguiente al que tiene la clase ‘activo’ tengan un color diferente al resto de los elementos.

Podemos usar el siguiente código:

1. $(‘li.activo’).each(function () {
2. var index = $(this).index();
3. $(‘li’).eq(index-1).css({‘color’:’#e2e2e2′});
4. $(‘li’).eq(index+1).css({‘color’:’#e2e2e2′});
5. });

Explicando el código anterior, tenemos:

1. Definimos una función que aplicará a todos los elementos de la serie. El evento each() permite que la función recorra todos los elementos de la serie, tiene un uso similar a ‘for’ de javascript. En este caso, recorrerá todos los elementos de la serie que tengan la clase ‘activo’; para nuestro ejemplo, sólo hay un elemento con esta clase
2. Definimos la variable ‘index’ que recogerá el index de los elementos que ha recorrido la función, para este caso, sólo uno de los elementos. Si hacemos un alert de la variable index, nos arrojará el número 3.
3. en las 2 líneas siguientes del código, le indicamos a la serie de elementos que ponga color gris a los elementos con un valor de index menor y mayor en una posición con respecto al elemento que tiene la clase ‘activo’

 

Seleccionar elementos con el evento index() nos permite hacer muchas cosas con una serie, permite que no necesitemos agregar más elementos al código, como clases o id’s adicionales a los elementos para poderlos identificar.