Association de légende à une image en jquery

Bonjour à tous,

Je souhaites mettre en place un petit système en jQuery pour associer une légende à une image.
Jusque là tout fonctionne bien sauf qu'il duplique la légende sur la première image. (voir affichage)
Merci pour votre aide

$(".picture").each(function(){
    var legende = $(this).attr("alt");
    var w = $(this).width();
    $(this).wrap('<div class="img-legende" style="width:'+w+'px"></div>');
    $(".img-legende").append('<div class="legende">'+legende+'</div>');
})

<img class="picture" src="upload/uploads/jarnoterie.jpg" alt="Site de la Jarnoterie"/>
<img class="picture" src="upload/uploads/menuiserie-menuau.jpg" width="500" alt="Site Menuiserie Menuau"/>

// Affichage
<div class="img-legende" style="width:500px">
<img class="picture" alt="Site de la Jarnoterie" src="upload/uploads/jarnoterie.jpg">
<div class="legende">Site de la Jarnoterie</div>
<div class="legende">Site Menuiserie Menuau</div>
</div>

<div class="img-legende" style="width:500px">
<img class="picture" width="500" alt="Site Menuiserie Menuau" src="upload/uploads/menuiserie-menuau.jpg">
<div class="legende">Site Menuiserie Menuau</div>
</div>

Bonjour,

je n'ai pas essayé le code mais après analyse il me semble que le problème vient de la ligne

$(".img-legende").append('<div class="legende">'+legende+'</div>');

Cette ligne ajoute

<div class="legende">'+legende+'</div>

à TOUS les éléments du DOM ayant la classe ".img-legende".

Par conséquent, pas de problème lors du 1er appel (puisqu'il n'y a qu'une seule classe "img-legende" mais le comportement n'est plus le bon par la suite (puisqu'il y a dès lors plusieurs classes "img-legende").

Il me semble que la légende doit être appliquée uniquement au conteneur parent de l'image associée à l'exécution de la fonction.
Peut-être que la ligne de code suivante permettra de solutionner le problème :

$(this).parent().append('<div class="legende">'+legende+'</div>');

Modifié par blondin (18 Mar 2013 - 16:12)

Génial, çà marche nickel.
Merci beaucoup pour votre réponse. Je remet le code corrigé pour ceux que ca intéresse.

$(".picture").each(function(){
                var legende = $(this).attr("alt");
                var w = $(this).width();
                $(this).wrap('<div class="img-legende" style="width:'+w+'px"></div>');
                $(this).parent().append('<div class="legende">'+legende+'</div>');
            })