jquery - 将子元素分组到较小的子组中

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"/>')
}

​<a href="http://jsfiddle.net/4sv66/1/" rel="nofollow">演示