在较小的子组中分组子元素

Question

我希望能够将元素分组为4或尽可能接近4的组。假设我的HTML看起来像：

<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 

我想输出是：

<div class="container"> 
    <div class="section"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 
    <div class="section"> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 
</div> 

在一个完美的世界，我只想改变HTML，但我不能在这种情况下，因为它正在生成服务器端。我认为nextUntil()是我想要的，但我不知道如何实现它。

Answer 1

试试这个：

var $items = $('.container div.items'); 

for (var i = 0; i < $items.length; i+=4) { 
    $items.slice(i, i+4).wrapAll('<div class="section"/>') 
} 

DEMO