Blog de David Amodia: Uso de los selectores :eq(), :lt(), :gt(), :even, :odd en jquery

Realmente el uso de selectores de índice me apasiona, me han sacado de varios problemas a la hora de seleccionar diferentes elementos de paginas web.Jquery dispone de varias formas de seleccionar elementos dentro de nuestro códido para realizar diferentes opciones sobre/con ellos. En este caso explicare el uso de 3+2 selectores que más uso.

Selector de índice :eq(índice), se utiliza para seleccionar un elemento con el índice entre paréntesis. El índice se inicializa desde 0.

Imaginemos que tenemos el siguiente código:
<table width="100%" border="1">
<tr>
<td><img class="imagen" src="flags/ai.png" width="18" height="12"></td>
<td><img class="imagen" src="flags/hu.png" width="18" height="12"></td>
</tr>
</table>

src de la imagen es:

el ancho de la imagen es:

el alto de la imagen es:

Y queremos seleccionar independientemente las diferentes imagenes.

$('td img:eq(0))   //seleccionamos dentro de un td la primera imagen.
$('td img:eq(1)) //seleccionamos dentro de un td la segunda imagen.

Y a partir de aquí podemos realizar sobre los atributos de la imagen 2 lo que queremos. Por ejemplo: Al cliclear sobre la imagen obtendremos su valor src y multiplicamos su ancho por dos.

$('td img:eq(1)').live( 'click', function () {
                    alert(this.src);
                    alert(this.width);

                   //duplicamos el ancho de la imagen.
                    this.setAttribute("width",2*this.width);
                    //ETC......

            } );

Selector de índice :lt(índice), se utiliza para seleccionar todos los elementos desde el primero, hasta el índice seleccionado.

<table width="100%" border="1">
<tr>
    <td><img class="imagen" src="flags/ai.png" width="18" height="12"></td>
    <td><img class="imagen" src="flags/hu.png" width="18" height="12"></td>
    <td><img class="imagen" src="flags/es.png" width="18" height="12"></td>
    <td><img class="imagen" src="flags/uk.png" width="18" height="12"></td>
    <td><img class="imagen" src="flags/ro.png" width="18" height="12"></td>
</tr>
</table>

$('td img:lt(3))   //seleccionamos dentro de un td
la primera,segunda y tercera imagen.
$('td img:lt(5)) //seleccionamos dentro de un td
la primera,segunda,tercera,cuarta y quinta imagen.
Ahora las tres primeras imagenes ejecutarán la función cuando se pase el ratón por encima.

$('td img:lt(3)').live( 'mouseover', function () {
                    alert(this.src);
                    alert(this.width);
                    //LE PODEMOS CAMBIAR LA CLASE
                    this.setAttribute("class", "imagen2")
                    //ETC......
                    this.setAttribute("width",2*this.width);

            } );

Bueno ya podemos seleccionar elementos individualmente, también todos los elementos que hay hasta un índice pero... nos falta algo, y si queremos seleccionar los elementos a partir de un índice dato, pues Jquery como siempre tiene la solución:

Selector de indice :gt(índice), se utiliza para seleccionar todos los elementos a desde el índice+1 seleccionado. Ojo el orden del contador empieza por cero.

<table width="100%" border="1">
<tr>
    <td><img class="imagen" src="flags/ai.png" width="18" height="12"></td>
    <td><img class="imagen" src="flags/hu.png" width="18" height="12"></td>
    <td><img class="imagen" src="flags/es.png" width="18" height="12"></td>
    <td><img class="imagen" src="flags/uk.png" width="18" height="12"></td>
    <td><img class="imagen" src="flags/ro.png" width="18" height="12"></td>
</tr>
</table>

$('td img:gt(3))   //seleccionamos dentro de un td a partir de la 3+1 imagen excluida.[quinta imagen]
$('td img:gt(2)) //seleccionamos dentro de un td a partir de la 2+1 imagen excluida.[cuarta y quinta imagen]

Selector de índice :even, es un selector muy simple que selecciona un elemento el siguiente no, el siguiente si etc.. puede ser interesante para dar estilos diferentes a celdas de una tabla, columnas o filas.Es como si seleccionará los elementos impares
Selector de índice :odd, es igual que even solo que seleccionada los elemento pares:

Ejemplo: Tablero de ajedrez. utilizando even;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title></title>
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>

    <style type="text/css">
    table { border: 1px solid #033; background-color: #FFF;}
    </style>
    </head>
    <body>
   <table width="500" height="500" border="0" cellpadding="0" cellspacing="0">
    <tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table>
<script>$("td:even").css("background-color", "black");</script>
<script>$("tr:even").css("background-color", "white");</script>
</code>
</body>
</html>

Blog de David Amodia

martes, 21 de diciembre de 2010

Uso de los selectores :eq(), :lt(), :gt(), :even, :odd en jquery

No hay comentarios:

Publicar un comentario