Problemas con JQuery

Después de buscar en Google y no encontrar nada (será que no sé) os cuanto mi problema.

Lo que quiero hacer es que debajo de las imágenes aparezca el valor de su atributo alt. Lo he hecho con JQuery porque me parecía más fácil y así es pero hay un problema. Cuando pongo más de una imagen sí, aparece el valor del atributo alt en cada una de las imágenes, pero solo el de la primera. Para que lo veáis he colgado una muestra.

No sé que es lo que hago mal. Si alguin puede solucionarlo o darme una alternativa o decirme donde puedo encontrar una solución (aunque no sea en JQuery) le estaré agradecido.

Este problema como tal no es de jQuery sino de tu interpración de los elementos.

Lo que tu hiciste fue recoger el atributo alt de la primera imagen para agregarlo después de todas ellas. Mientras que lo que deberias hacer es coger todos las imagenes y hacer un loop para interactuar por en cada uno, una vez hecho esto agregas los alt de cada img después de ellas.

Código :

$('img').each(function(){
    var alt = $(this).attr('alt');
    $(this).wrap('<div class="img">','</div>').after('<p>'+alt+'</p>');
});

Hice un ejemplo más completo, incluyendo el uso de document ready espero le des un buen uso y comprendas mejor el funcionamiento de jQuery.

Un saludo.

Muchas Gracias!
Lo que quiero hacer no es nada del otro mundo. En los textos donde hay imágenes, ya que el atributo alt es obligatorio ponerlo, se me ocurrió darle uso visual. Así no tienes que ir haciendo un pie de foto por cada imagen.
Además este escript me ayudará con otro problema similar que tengo.