使用 jQuery 将三个重复的 div 组包装成一个答案

【问题标题】：Wrap three repeating div groups into one using jQuery使用 jQuery 将三个重复的 div 组包装成一个
【发布时间】：2010-12-15 01:43:16
【问题描述】：

我这里还有一个问题。我几乎没有重复的 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>

提前感谢您的帮助

【问题讨论】：

标签： jquery

【解决方案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

【讨论】：

【解决方案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>");

【讨论】：

【解决方案3】：

这有点令人费解，但我想不出更简单的方法。它虽然有效：

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

【讨论】：

你肯定打败了我，但我不确定你是否可以添加 jQuery 元素 - 我认为 add 只需要一个选择器表达式或一个 DOM 元素。
.bb_box_t1 需要是 .bb_box_tl，但我不确定这是否可行

【解决方案4】：

我不是专家，但这可能行得通：

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

【讨论】：

当然应该。可能将.bb_box_tl替换为div.bb_box_tl等。
这不起作用，因为当您在之前添加<div> 时，DOM 看不到结束标记，因此它会立即在刚刚添加的<div> 之后立即添加它。