Оберните три повторяющиеся группы div в одну, используя jQuery

Question

У меня здесь другая проблема. У меня есть несколько повторяющихся групп дивов. В одной группе 3 дива с разными классами.

Что мне нужно сделать, так это завернуть в один «контейнер». Когда я использую wrapAll, он объединяет все в один div.

А это мой 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>

Это все в одном теле.

В результате я бы хотел, чтобы они выглядели так:

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

Заранее благодарю за помощь

Answer 1

Я написал только плагин для этого некоторое время назад

(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);

Вы передаете объект опций, определяющий

• childElem - фильтр выбора ближайших дочерних элементов для переноса
• sets - как вы хотите сгруппировать дочерние элементы. Например, наборы 3 в вашем случае. По умолчанию 1
• wrapper - элемент для переноса дочерних элементов. По умолчанию <div>

Используйте так же, как на ваших данных. Вам нужно определить родительский элемент для divs

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

Вот Рабочая демонстрация с некоторыми данными.

UPDATE:

Я написал пост в блоге со слегка измененной и улучшенной версией этой

Answer 2

Предполагая, что ваши div - это все дочерние элементы элемента с контейнером id (иначе измените селектор jquery), и они появляются строго в этом порядке

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

Answer 3

Это немного запутанно, но я не мог придумать более легкий путь. Это работает, хотя:

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

Answer 4

Я не эксперт, но это может сработать:

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