Question

我有一个类似于此过程的东西：

<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>

为了保持正确，我想用div＆＃34; w-row＆＃34;来包装每3列一个div。

我的输出应该是这样的：

<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和＆＃34;换行＆＃34;每3个项目有一个div，但是没有用。此外，我试图添加HTML（只是一个简单的）但由于某种原因我覆盖了一切（猜测因为我使用$ .html（）;

感谢您的任何建议

Answer 1

您可以使用.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

n个元素后自动添加行（Jquery）

1 个答案: