Débutant jQuery. Mon objectif est de parcourir chaque article et d'ajouter l'img à la div avec le corps de la classe. Le problème est qu'il prend chaque image et l'ajoute au div avec le corps de la classe. Merci!
Mon script
<article> <div class="date">Feb 22, 2019</div><img src="imagone.png"> <div class="body"> Some random text </div> </article> <article> <div class="date">Feb 23, 2019</div><img src="imagtwo.png"> <div class="body"> Some random text </div> </article> <article> <div class="date">Feb 24, 2019</div><img src="imagthree.png"> <div class="body"> Some random text </div> </article>
Balisage
<article> <div class="date">Feb 22, 2019</div> <div class="body"> <img src="imagone.png"> Some random text </div> </article> <article> <div class="date">Feb 23, 2019</div> <div class="body"> <img src="imagtwo.png"> Some random text </div> </article> <article> <div class="date">Feb 24, 2019</div> <div class="body"> <img src="imagthree.png"> Some random text </div> </article>
Balisage souhaité
jQuery('article .date').each(function() { jQuery(this).closest('article').find('img').after(this); });
3 Réponses :
La méthode
jQuery .after ()
fonctionne en fait dans l'autre sens:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <article> <div class="date">Feb 22, 2019</div> <div class="body"> <img src="imagone.png"> Some random text </div> </article> <article> <div class="date">Feb 23, 2019</div> <div class="body"> <img src="imagtwo.png"> Some random text </div> </article> <article> <div class="date">Feb 24, 2019</div> <div class="body"> <img src="imagthree.png"> Some random text </div> </article>
$('article img').each(function(){ $(this).closest('article').find('.date').after(this); });
reference.after(nodeToMove)
Utilisez .closest ()
pour .body
et chaînez .before()
<article> <div class="date">Feb 22, 2019</div> <div class="body"> <img src="https://i.ibb.co/5LPXSfn/Lenna-test-image.png"> Some random text </div> </article> <article> <div class="date">Feb 23, 2019</div> <div class="body"> <img src="https://i.ibb.co/tmQZgJb/68eb2df1a189f88bb0cbd47a3e00c112.png"> Some random text </div> </article> <article> <div class="date">Feb 24, 2019</div> <div class="body"> <img src="https://i.ibb.co/ZHvWsKb/o1z7p.jpg"> Some random text </div> </article> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
article {outline:3px dashed red;padding:5px} .date {outline:5px dotted blue;padding:5px} .body {outline:3px solid black;padding:5px} img {width:120px;height:120px;}
$('.body img').each(function() { $(this).closest('.body').before($(this)); });
Si je comprends bien, vous souhaitez simplement déplacer l'image après la date?
Essayez ceci, testé et fonctionne.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <article> <div class="date">Feb 22, 2019</div> <div class="body"> <img src="imagone.png"> Some random text </div> </article> <article> <div class="date">Feb 23, 2019</div> <div class="body"> <img src="imagtwo.png"> Some random text </div> </article> <article> <div class="date">Feb 24, 2019</div> <div class="body"> <img src="imagthree.png"> Some random text </div> </article>
Exemple avec votre balisage :
$('article img').each(function(){ $(this).insertAfter( $(this).parents('article').find('.date') ); });
$('article img').each(function(){ $(this).insertAfter( $(this).parents('article').find('.date') ); });