CODEWITHSUNDEEP
jqueryappend
Melissa Ginoza
Melissa Ginoza

Reputation: 49

Append divs with the same class name into div with the same id name

I'm trying to append divs with the same class name into a div with the same ID name.

So I'd like divs to be appended like so:

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

This is the original 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>

I know I can append the divs using the JQUERY code

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

I can also select certain classes using the code

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

or just this one. Since there's two classes, I thought about separating it into [0] and [1]. Not sure if there's an easier way

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

I'm having trouble putting these codes together. I just recently started JQuery so I'd love any explanations! Also, I'm not sure why the colors aren't coming out for the code.

Upvotes: 1

Views: 1352

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

You've got the constituent parts, you just need to put them together within the each loop. The only thing you're missing is that to have the element appear under #all as well as the relevant colour container you'll need to clone it, which can be done with clone(). Try this:

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>

Upvotes: 1

Related Questions