jQuery append() each loop

1
votes

jQuery newbie. My goal is to loop through each article and append the img to the div with the class body. The problem is its taking every image and appending to the div with the class body. Thanks!

My Script

jQuery('article .date').each(function() {
   jQuery(this).closest('article').find('img').after(this);

});

Markup

<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>

Desired markup

<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>
3
jqueryforeachappend

3 Answers

0
votes

If I understand correctly you just want to move the image after the date?

Try this, tested and works.

$('article img').each(function(){
    $(this).insertAfter(
        $(this).parents('article').find('.date')
    );
});

Example with your markup: 

    $('article img').each(function(){
        $(this).insertAfter(
            $(this).parents('article').find('.date')
        );
    });
<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>
0
votes

jQuery .after() method actually works the other way around :

reference.after(nodeToMove)


$('article img').each(function(){
  $(this).closest('article').find('.date').after(this);
});
<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>
0
votes

Use .closest() to .body and chain .before()

Demo

$('.body img').each(function() {
  $(this).closest('.body').before($(this));
});
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;}
<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>