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

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

我需要做的是将其包装成一个“容器”。 当我使用wrapAll时，它将所有包装成一个div。

这是我的HTML：

这是一体的。

因为我的结果我希望他们看起来像这样：

提前谢谢你的帮助

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 – 要包装的直接子节点的filter选择器
• sets – 如何对子元素进行分组。 例如，在您的情况下，3组。 默认值为1
• wrapper – 包装子元素的元素.default是

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

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

这是一个包含一些数据的工作演示 。

更新：

我写了一篇博文，其中略有修改和改进版本

Answer 2

假设你的div是具有id容器的元素的所有子元素（否则更改jquery选择器）并且严格按此顺序出现

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

Answer 3

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

 $("div.bb_box_tl").wrap("
"); $("div.box-cont").each(function() { $(this).append($(this).next()); $(this).append($(this).next()); }); 

Answer 4

我不是专家，但这可能有用：

 $(".bb_box_tl").before('
'); $(".bb_box_lb").after('
');