jquery - 使用 jQuery 将三个重复的 div 组合并为一个

Question

我这里还有另一个问题。我有几个重复的 div 组。一组有 3 个不同类别的 div。

我需要做的是将其包装到一个“容器”中。当我使用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>

像这样使用你的数据。您需要为 div 定义一个父元素

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

这是一个Working Demo一些数据。

更新:

I wrote a blog post with a slightly modified and improved version of this