将具有相同类名的 div 附加到具有相同 id 名称的 div 中

Question

我正在尝试将具有相同类名的 div 附加到具有相同 ID 名称的 div 中。

所以我希望像这样附加 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>

---

我知道我可以使用 JQUERY 代码附加 div

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