自动添加行后n元素（Jquery） [英] automatically add row after n Elements (Jquery)

问题描述

我有一个这样的过程生成的

I have something like this generated by a procedure:

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

为了保持正确，我想将每3列包装一个div， w-row。

To keep it correct however, I would like to wrap every 3 columns with a div with the class "w-row".

我的输出应该是：

<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插件，因此点击过滤器后元素的数量可能会改变。要显示它，我有一个小功能，如你可以看到：

So, this is a galery plugin, so the number of elements may change after clicking on a filter. To display it, i have small function, as you can see here:

// show only divs, which has the current filter in its classes
    $('.entry').each(function() {
        if (!$(this).hasClass(filtername)) {
            $(this).fadeOut();
        } else {
            $(this).fadeIn();
        }
    });

我试图添加一个反变量 cnt 和wrap每3个项目与一个div，但是没有工作。我试图添加HTML（只是一个简单的），但由于某种原因我是覆盖一切（猜测，因为我使用$ .html（）;

I tried to add a counter-variable cnt and "wrap" every 3 items with a div, but that didn't work. Also i tried to add HTML (just a simple ) but for some reason i was overriding everything (guess because i used $.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>");
}

在div中每隔3个div

这篇关于自动添加行后n元素（Jquery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！