DOM Manipulation to restructure HTML

Question

I have the following HTML structure:

<div class="wrapper">
   <div class="a"></div>
   <div class="b"></div>
   <div class="a"></div>
   <div class="b"></div>
   <div class="a"></div>
   <div class="c"></div>
</div>

On mobile, I need all the a divs to organize into a separate div. The same for the b divs and the c, so that the result is:

<div class="a-wrapper">
   <div class="a"></div>
   <div class="a"></div>
   <div class="a"></div>
</div>

<div class="b-wrapper">
   <div class="b"></div>
   <div class="b"></div>
</div>

<div class="c-wrapper">
   <div class="c"></div>
</div>

I know that this is going to take some DOM manipulation, but I'm not sure as to the best approach. Looking for direction in the way of documentation or resources. Thanks.

score 2 · Accepted Answer · answered Dec 09 '15 at 01:32

Try this (demo)

var wrappers = [ 'a', 'b', 'c' ];
$.each(wrappers, function( index, value ) {
  $('.' + value).wrapAll('<div class="' + value + '-wrapper"></div>');
});

The new wrappers will all be contained within the outer "wrapper"

<div class="wrapper">
   <div class="a-wrapper">
       <div class="a"></div>
       <div class="a"></div>
       <div class="a"></div>
   </div>
   <div class="b-wrapper">
       <div class="b"></div>
       <div class="b"></div>
   </div>  
   <div class="c-wrapper">
       <div class="c"></div>
   </div>
</div>

DOM Manipulation to restructure HTML

1 Answers1