Добавление 4 делений за раз (из списка делений) в отдельные деления

Question

Я пытаюсь добавить 4 div за один раз (из списка div) в определенный div с классом .movehere.

Это то, что я ищу:

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

исходный код

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

Я могу переместить каждый из .moveme div, используя .each и .append

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

Я не уверен, как получитьВозможно, используется механизм подсчета ...?

Большое спасибо!

Answer 1

Вы можете просто целиться в элементы movehere и перемещать 4 за раз.После того, как вы переместили их все, селектор не найдет ни одного для перемещения.

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