jQuery append() each loop

34
February 28, 2019, at 02:00 AM

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

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>

Answer 2

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>

Answer 3

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>

READ ALSO
unable to deploy next js to azure

unable to deploy next js to azure

I am trying to deploy my NEXTJS app to azureI created a webapplication with a linux OS containing Node installed

65
How I can determine the reading position of a user (cross screens)?

How I can determine the reading position of a user (cross screens)?

I am trying to implement a mobile reading app with the capability of bookmarking across devices I am using an EPUB which is in xhtml form,

6
Login automatically using python

Login automatically using python

So I've seen that there are a couple of similar questions but none of them worked for meThis is the login page that I'm trying to log in to:

20
Key error pandas dataframe when said column exists

Key error pandas dataframe when said column exists

I have the following dataframe which I grouped by ID and PERIOD_END_DATE

63