jQuery append () каждый цикл

Question

JQuery новичок.Моя цель - пройтись по каждой статье и добавить img к div с телом класса.Проблема в том, что он берет каждое изображение и добавляет к div с телом класса.Спасибо!

Мой скрипт

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

});

Разметка

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

Answer 1

Использование .closest() до .body и цепочка .before()

Демо

$('.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>

Answer 2

Если я правильно понимаю, вы просто хотите переместить изображение после даты?

Попробуйте, протестировали и работаете.

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

Пример с вашей разметкой:

    $('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>

Answer 3

jQuery .after() метод фактически работает наоборот:

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>