<分区>
标签 javascript jquery html css
<分区>
我有一个程序生成的类似这样的东西:
<div class="w-row">
<div class="w-col w-col-4 entry abc"> ... </div>
<div class="w-col w-col-4 entry abc def"> ... </div>
<div class="w-col w-col-4 entry def"> ... </div>
<div class="w-col w-col-4 entry 123"> ... </div>
</div>
但是为了保持正确，我想用类为“w-row”的 div 包装每 3 列。
我的输出应该是这样的:
<div class="w-row">
<div class="w-col w-col-4 entry abc"> ... </div>
<div class="w-col w-col-4 entry abc def"> ... </div>
<div class="w-col w-col-4 entry def"> ... </div>
</div>
<div class="w-row">
<div class="w-col w-col-4 entry 123"> ... </div>
</div>
所以，这是一个 galery 插件，所以元素的数量可能会在点击过滤器后发生变化。为了显示它，我有一个小函数，正如你在这里看到的:
// show only divs, which has the current filter in its classes
$('.entry').each(function() {
if (!$(this).hasClass(filtername)) {
$(this).fadeOut();
} else {
$(this).fadeIn();
}
});
我尝试添加一个计数器变量 cnt 并用一个 div “包装”每 3 个元素，但这没有用。我也尝试添加 HTML(只是一个简单的)但出于某种原因我覆盖了所有内容(猜测是因为我使用了 $.html();
谢谢你的建议
最佳答案
你可以用 .slice() 来做
var cols = $(".w-col");
for(var i = 0; i < cols.length; i+=3) {
cols.slice(i, i+3).wrapAll("<div class='w-row'></div>");
}
这里是同样的问题和答案: Wrap every 3 divs in a div
关于javascript - 在 n 个元素后自动添加行(Jquery)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28087458/