Solución 1 - "JQuery - función find()"

Una herramienta muy útil para añadir efectos ópticos y navegar entre tags HTML es el framework de Javascript Jquery. Tras añadir la referencia js a tu proyecto podrás utilizar esta potente herramienta que facilita el trabajo a la hora de bregar con el "duro" javascript. Una de las funciones que he descubrido recientemiente es el metodo find().

http://api.jquery.com/find/

<p>
   <span id="primero" />
   <a>
      <span id="segundo" />
   </a>
   <strong><span id="tercero" data-item="megusta" /></strong>
</p>

Esta función nos devuelve todos los tags descendientes que hemos puesto como parámetro de entrada, respetando la jerarquía de forma descendiente:

$('p').find('span') //Nos devolvería todos los elementos 'span' contenidos en el tag 'p'. En el ejemplo los dos span ("primero" y "segundo").


$('p').find('a span ') //Nos devolvería todos los elementos 'span' contenidos en el tag 'a' y a su vez en el tag 'p'. En el ejemplo en el span "segundo"-.

También se pueden añadir criterios de búsqueda, como por ejemplo:

$('p').find('span[class="megusta"]') //Nos devolvería el span "tercero".