Wrap three repeating div groups into one using jQuery

Question

Hi all,

I have another problem here. I have few repeating groups of divs. There is 3 divs with different classes in one group.

What I need to do is wrap the into one 'container'. When I'm using wrapAll it wraps all into one div.

And this is my html:

<div class="bb_box_tl"></div>
<div class="bb_box_l"></div>
<div class="bb_box_lb"></div>

<div class="bb_box_tl"></div>
<div class="bb_box_l"></div>
<div class="bb_box_lb"></div>

<div class="bb_box_tl"></div>
<div class="bb_box_l"></div>
<div class="bb_box_lb"></div>

This is all in one body.

As I result i would like to have them look like this:

<div class="box-cont">
    <div class="bb_box_tl"></div>
    <div class="bb_box_l"></div>
    <div class="bb_box_lb"></div>
</div>

<div class="box-cont">
    <div class="bb_box_tl"></div>
    <div class="bb_box_l"></div>
    <div class="bb_box_lb"></div>
</div>

<div class="box-cont">
    <div class="bb_box_tl"></div>
    <div class="bb_box_l"></div>
    <div class="bb_box_lb"></div>
</div>

Thank you for your help in advance

Answer 1

I'm not an expert, but this might work:

$(".bb_box_tl").before('<div class="box-cont">');
$(".bb_box_lb").after('</div>');

Answer 2

This is a bit convoluted but I couldn't think of an easier way. It works though:

$("div.bb_box_tl").wrap("<div class='box-cont'></div>");
$("div.box-cont").each(function() {
  $(this).append($(this).next());
  $(this).append($(this).next());
});

Answer 3

I wrote just the plugin for this a while ago

(function($){

   $.fn.wrapChildren = function(options) {

    var options = $.extend({
                              childElem : undefined,
                              sets : 1,
                              wrapper : 'div'
                            }, options || {});
    if (options.childElem === undefined) return this;

 return this.each(function() {
  var elems = $(this).children(options.childElem);
  var arr = [];

  elems.each(function(i,value) {
    arr.push(value);
    if (((i + 1) % options.sets === 0) || (i === elems.length -1))
   {
     var set = $(arr);
     arr = [];
     set.wrapAll($("<" + options.wrapper + ">"));
   }
  });
    });

  }

})(jQuery);

You pass in an options object defining

• childElem - the filter selector of the immediate children to wrap
• sets - how you want to group the child elements. For example, sets of 3 in your case. Default is 1
• wrapper - the element to wrap the child elements in. default is <div>

Use like so on your data. You need to define a parent element for the divs

$(function() {   
  $('body').wrapChildren({ 
             childElem : 'div.bb_box_tl, div.bb_box_l, div.bb_box_lb' , 
             sets: 3, 
             wrapper: 'div class="box-cont"'
  });   
});

Here's a Working Demo with some data

Answer 4

Assuming your div's are all children of an element with id container (else change jquery selector) and the appear strictly in this order

while ($("#container > div[class^='bb_box_']").size() >= 3)
  $("#container > div[class^='bb_box_']:lt(3)").wrapAll("<div class='box-cont'></div>");

Answer 5

You need a way to identify and handle each group separately. This isn't the most flexible or elegant solution but it'll work (untested):

$('.bb_box_tl').each(function() {
    $(this).before('<div class="box-cont">')
    $(this).next().next().after('</div>');
});

or

$('.bb_box_tl').each(function() {
    var n1 = $(this).next();
    var n2 = n1.next();
    $(this).add(n1[0]).add(n2[0]);
    $(this).wrapAll($('.box-cont'))
});