我有这个代码,每3个我需要用div包装
(原)
<div id="entries">
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
</div>
(应该成为)
<div id="entries">
<div>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
</div>
<div>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
</div>
<div>
<a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a>
</div>
</div>
答案 0 :(得分:5)
我把这个插件放在一起很好地完成了这项工作
(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
- 要包装的直接子节点的元素nodeType sets
- 您希望如何对子元素进行分组。例如,在您的情况下为3组。默认值为1 wrapper
- 包含子元素的元素。默认为<div>
在测试数据上使用如此。
$(function() {
$('#entries').wrapChildren({ childElem : 'a' , sets: 3});
});
这是一个Working Demo。将 / edit 添加到网址以播放代码。
修改强>
我很想把它变成一个更完善的插件,如果证明有用的话。。
答案 1 :(得分:2)
强大的工作,可能不是最聪明的事情:
var $entries = $("#entries");
var $div = $('<div></div>').appendTo($entries);
while($div.next().length > 0){
$div.append($div.nextAll().slice(0,3));
$div = $('<div></div>').appendTo($entries);
}
答案 2 :(得分:0)
将一个类应用于每个水平填充内容的“sub-div”,并将其赋予clrar:both;作为css属性,它将显示您想要的方式。如果您想垂直显示它,请应用float:left;代替。
答案 3 :(得分:0)
var $c = $('#entries');
while ($c.children('a').length) {
$c.children('a:lt(3)').wrapAll('<div>');
}
的工作演示(尽管有不同的HTML结构)