CODEWITHSUNDEEP
jqueryappend
Melissa Ginoza
Melissa Ginoza

Reputation: 49

Appending 4 divs at a time (from a list of divs) into a separate divs

I'm trying to append 4 divs at a time (from a list of divs) into a specific divs with class .movehere.

This is what I'm looking for:

<section id="oldsection"></section>
<section id="newsection">
   <div></div>
   <div></div>
   <div class="movehere">
      <div class="moveme"></div>
      <div class="moveme"></div>
      <div class="moveme"></div>
      <div class="moveme"></div>
   </div>
   <div></div>
   <div></div>
   <div class="movehere">
      <div class="moveme"></div>
      <div class="moveme"></div>
      <div class="moveme"></div>
   </div>
</section>

the original code is

<section id="oldsection">
      <div class="moveme"></div>
      <div class="moveme"></div>
      <div class="moveme"></div>
      <div class="moveme"></div>
      <div class="moveme"></div>
      <div class="moveme"></div>
      <div class="moveme"></div></section>
<section id="newsection">
   <div></div>
   <div></div>
   <div class="movehere">
   </div>
   <div></div>
   <div></div>
   <div class="movehere">
   </div>
</section>

I can move each of the .moveme divs using .each and .append

   $('#oldsection .moveme').each(function () {
      #(".movehere").append($(this));        
   });

I'm not sure how to get the counting to work Perhaps using a counting mechanism...?

Thank you very much!

Upvotes: 0

Views: 66

Answers (1)

Taplar
Taplar

Reputation: 24965

You can simply target the movehere elements, and move 4 at a time. Once you've moved them all, the selector will find none to move.

$('.movehere').each((_, destination) => {
  $('#oldsection .moveme').slice(0, 4).appendTo(destination);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="oldsection">
  <div class="moveme">1</div>
  <div class="moveme">2</div>
  <div class="moveme">3</div>
  <div class="moveme">4</div>
  <div class="moveme">5</div>
  <div class="moveme">6</div>
  <div class="moveme">7</div>
</section>
<section id="newsection">
  <div></div>
  <div></div>
  <div class="movehere">
  </div>
  <div></div>
  <div></div>
  <div class="movehere">
  </div>
  <div></div>
  <div></div>
  <div class="movehere">
  </div>
</section>

Upvotes: 1

Related Questions