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

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 2

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

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

尝试一下，测试并工作。

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

jQuery append（）每个循环

3 个答案:

演示