Déplacement d'images dans le DOM via JQUERY

Bonjour,

Je souhaiterais déplacer des images d'une div enfant à sa div parent ...

<div class="mere">
  <div class="enfant">
     <img src="monimage1.jpg" />
     <img src="monimage2.jpg" />
     <img src="monimage3.jpg" />
  </div>
</div>

<div class="mere">
  <div class="enfant">
     <img src="monimage4.jpg" />
     <img src="monimage5.jpg" />
  </div>
</div>

j'ai essayé un

$(".enfant img").appendTo(".enfant").parent();

Evidemment toutes les images se déplacent comme ceci :

<div class="mere">
     <img src="monimage1.jpg" />
     <img src="monimage2.jpg" />
     <img src="monimage3.jpg" />
     <img src="monimage4.jpg" />
     <img src="monimage5.jpg" />
  <div class="enfant">
  </div>
</div>

<div class="mere">
     <img src="monimage1.jpg" />
     <img src="monimage2.jpg" />
     <img src="monimage3.jpg" />
     <img src="monimage4.jpg" />
     <img src="monimage5.jpg" />
  <div class="enfant">
  </div>
</div>

Je ne vois pas comment peut-on faire

Merci pour votre aide ...

  $(".enfant").each(function(){
  $(this).children().remove().prependTo($(this).parent());
  });

Modifié par paolo (09 Feb 2011 - 13:44)

Si l'imbrication des blocs ne change pas, je dirais :

var a = $('.enfant img');

for (var x=0;x<a.length;x++) {
      $(a[x]).appendTo(a[x].parentNode.parentNode);
}

alert($('.mere').html());

Je viens de tester vos solutions. La solution de Ramy répond parfaitement à mes attentes. En revanche, ta solution, Paolo, semble choisir uniquement la première image rencontrée ... et ensuite le traitement se termine ...

En tous les cas, un grand merci à vous deux ...

Ça fonctionne.