jQuery $(this): Selector para acceder a elementos hijo de un elemento

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.

$(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:

<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>