jQuery append() each loop

问题: 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 wit...

问题:

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>

回答1:

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>


回答2:

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>


回答3:

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>

  • 发表于 2019-03-04 16:39
  • 阅读 ( 225 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除