automatically add row after n Elements (Jquery)

Question

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>

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

My output should be something like:

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

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();
        }
    });

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();

Thanks for any advices

I think you will need to repaint it each time the filter changes, so the w-row divs don't mess up. — Hoijof, Jan 22 '15 at 11:21

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

you can do it with .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>");
}

here is same question and answer: Wrap every 3 divs in a div

edited May 23 '17 at 11:43

Community

1
1

answered Jan 22 '15 at 11:26

Timotheus0106

1,536
3
18
28

automatically add row after n Elements (Jquery)

1 Answers1

Linked