How to wrap a div around multiple identical class elements

Question

I am trying to wrap multiple divs of the same class in a div and skip the div not with the same class. .wrap does not merge them, and .wrapAll throws unclassified divs below. I was busy trying to create an alternative solution, but to no avail.

Original:

<div class="entry">Content</div> <div class="entry">Content</div> <div class="entry">Content</div> <div>Skip in wrap</div> <div class="entry">Content</div> <div class="entry">Content</div> <div class="entry">Content</div> continued... 

Required Result:

 <div> <div class="entry">Content</div> <div class="entry">Content</div> <div class="entry">Content</div> </div> <div>Skip in wrap</div> <div> <div class="entry">Content</div> <div class="entry">Content</div> <div class="entry">Content</div> </div> 

Answer 1

You can quickly navigate through the <div> elements with a for loop. In the code below, just change the initial selector here to capture all those siblings of divs, for example. #content > div.entry or wherever they are:

 var divs = $("div.entry"); for(var i=0; i<divs.length;) { i += divs.eq(i).nextUntil(':not(.entry)').andSelf().wrapAll('<div />').length; }​ 

You can try it here . We simply scroll through the .entry <div> elements using .nextUntil() to get all the .entry elements .entry appears using the :not() selector. Then we take these next elements, plus the one we started with ( .andSelf() ) and doing .wrapAll() in this group. After they are wrapped, we will skip ahead or many elements in the loop.

Answer 2

I just hacked into a simple custom solution .

 var i, wrap, wrap_number = 0; $('div').each(function(){ //group entries into blocks "entry_wrap_#" var div = $(this); if (div.is('.entry')) { wrap = 'entry_wrap_' + wrap_number; div.addClass(wrap); } else { wrap_number++; } }); for (i = 0; i <= wrap_number; i++) { //wrap all blocks and remove class wrap = 'entry_wrap_' + i; $('.' + wrap).wrapAll('<div class="wrap"/>').removeClass(wrap); } 

Answer 3

You can also add new divs to your markup, and then add the content you want to wrap in them.

If your markup is this:

 <div class="wrap"> <div class="col-1"></div> <div class="col-1"></div> <div class="col-1"></div> <div class="col-1"></div> <div class="col-1"></div> <div class="col-2"></div> <div class="col-2"></div> <div class="col-2"></div> <div class="col-2"></div> <div class="col-2"></div> </div> 

Use the following to add two new divs ( column-one and column-two ), and then add the appropriate content to these divs:

 // Set vars for column content var colOne = $('.col-1').nextUntil('.col-2').addBack(); var colTwo = $('.col-2').nextAll().addBack(); // Append new divs that will take the column content $('.wrap').append('<div class="column-first group" /><div class="column-second ground" />'); // Append column content to new divs $(colOne).appendTo('.column-first'); $(colTwo).appendTo('.column-second'); 

Demo here: http://codepen.io/zgreen/pen/FKvLH