我如何分组包装标签？

Question

我的html中可能有任意数量的文章:

<div id="main">
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</div>

现在,我想分成一组所有文章.

var group = parseInt($('#main article').length / 3, 10); // results 4

现在,我如何用一组中的四篇文章包装它？

结果应该是这样的:

<div id="main">
  <div class="group">
     <article></article>
     <article></article>
     <article></article>
     <article></article>
  </div>
  <div class="group">
     <article></article>
     <article></article>
     <article></article>
     <article></article>
  </div>
  <div class="group">
     <article></article>
     <article></article>
     <article></article>
     <article></article>
  </div>
  <div class="group"><!--the remaining two articles-->
     <article></article>
     <article></article>
  </div>
</div>

Answer 1

尝试一个简单的for循环

var $articles = $('#main article'),
    length = $articles.length;
for (var i = 0; i < length; i = i + 4) {
    $articles.slice(i, i + 4).wrapAll('<div class="group"/>')
}

演示:小提琴