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

如果我理解正确你只想在日期之后移动图像？

试试这个，测试并运作。

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

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>

Answer 3

使用.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>