автоматически добавить строку после п элементов (Jquery)

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> 

Чтобы сохранить его правильно, однако, я хотел бы, чтобы обернуть каждые 3 колонки с DIV с классом " W-строка».

Мой вывод должен быть чем-то вроде:

<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 и «обернуть» каждые 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