Vamos a repasar el selector de jQuery $(this), este selector nos permite posicionarnos en un determinado elemento e interacturar con los elementos hijo.
En el siguiente post podéis ver los diferentes selectores que hay en jQuery. Otros post que os pueden interesar son:
- jQuery ready(): Repaso a la función $( document ).ready()
- jQuery noConflict(): Como evitar el conflicto y duplicidad del alias $
- jQuery chaining: Aplicar secuencias de efectos
- jQuery each(): Recorrer elementos del DOM
Ejemplos de jQuery $(this)
Vamos con este ejemplo para acceder a los nodo hijo de una lista en el que ocultaremos los elementos hijo impares.
|
1 2 3 4 5 |
$(document).ready(function(){ $("#listado1").hover(function() { $("li:even", this).hide(); }); }); |
Os explico el código superior:
- Con hover() detectamos que el ratón se posiciona sobre el elemento con id = listado1, en este caso es una lista.
- Después con $(«li:even», this) accedemos a los elementos hijo impares de la lista y con hide() los ocultamos.
En el ejemplo he puesto 2 listas para ver que solo interactuamos con los elementos hijo de una de ellas, su código HTML es el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<p> <ul id="listado1"> <li>azul</li> <li>verde</li> <li>rojo</li> <li>negro</li> <li>amarillo</li> </ul> </p> <p> <ul id="listado2"> <li>azul 2</li> <li>verde 2</li> <li>rojo 2</li> <li>negro 2</li> <li>amarillo 2</li> </ul> </p> |