Добавить div с тем же именем класса в div с тем же именем

Question

Я пытаюсь добавить div с тем же именем класса в div с тем же именем ID.

Поэтому я бы хотел, чтобы div добавлялся следующим образом:

<div id="originalsection"></div>
<div id="all" class="newsection">
   <div class="red all"> A </div>
   <div class="blue all"> B </div>
   <div class="green all"> C </div>
   <div class="red all"> D </div>
   <div class="blue all"> E </div>
   <div class="green all"> F </div>
</div>
<div id="red" class="newsection">
   <div class="red all"> A </div>
   <div class="red all"> D </div>
</div>
<div id="blue" class="newsection">
   <div class="blue all"> B </div>
   <div class="blue all"> E </div>
</div>
<div id="green" class="newsection">
   <div class="green all"> C </div>
   <div class="green all"> F </div>
</div>

Это оригинальный HTML:

<div id="originalsection">
   <div class="red all"> A </div>
   <div class="blue all"> B </div>    
   <div class="green all"> C </div>
   <div class="red all"> D </div>
   <div class="blue all"> E </div>
   <div class="green all"> F </div>
</div>
<div id="all" class="newsection"></div>
<div id="red" class="newsection"></div>
<div id="blue" class="newsection"></div>
<div id="green" class="newsection"></div>

---

Я знаю, что я могу добавить div, используя код JQUERY

$('div#originalsection div').each(function () {
   $(".newsection").append(this);
});

Я также могу выбрать определенные классы, используя код

var sectionclass = $(this).attr('class').split(' ')[0];

или только этот.Поскольку есть два класса, я подумал о том, чтобы разделить его на [0] и [1].Не уверен, что есть более простой способ

var sectionclass = $(this).attr('class');

---

У меня проблемы с соединением этих кодов.Я только недавно запустил JQuery, поэтому я хотел бы получить любые объяснения!Кроме того, я не уверен, почему цвета не появляются для кода.

Answer 1

У вас есть составные части, вам просто нужно соединить их в каждом цикле.Единственное, чего вам не хватает, так это того, что элемент должен отображаться в #all, а также соответствующий контейнер цвета, который вам понадобится для клонирования, что можно сделать с помощью clone().Попробуйте это:

var $all = $('#all');

$('div#originalsection div').each(function() {
  var $div = $(this);
  var sectionclass = $div.attr('class').split(' ')[0];
  $('#' + sectionclass).append($div);
  $all.append($div.clone());
});

#red { color: red; }
#green { color: green; }
#blue { color: blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="originalsection">
  <div class="red all"> A </div>
  <div class="blue all"> B </div>
  <div class="green all"> C </div>
  <div class="red all"> D </div>
  <div class="blue all"> E </div>
  <div class="green all"> F </div>
</div>
<div id="all" class="newsection"></div>
<div id="red" class="newsection"></div>
<div id="blue" class="newsection"></div>
<div id="green" class="newsection"></div>