我这里还有另一个问题。我有几个重复的 div 组。一组有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>
提前谢谢你的帮助
我不久前为此编写了插件
(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 - 要包装的直接子级的过滤器选择器
- 集 - 您希望如何对子元素进行分组。例如,您的情况是 3 件套。默认值为 1
- 包装器 - 将子元素包装在其中的元素。默认为
<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"'
});
});
这是一个工作演示一些数据。
UPDATE:
我写了一篇博客文章,对此进行了稍微修改和改进的版本
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)