grouping every N number of elements
<p>I have a ul which can have several li elements in it, I want every n number to be placed inside a div, so for example if this is the html:</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;1&lt;/li&gt;
&lt;li&gt;2&lt;/li&gt;
&lt;li&gt;3&lt;/li&gt;
&lt;li&gt;4&lt;/li&gt;
&lt;li&gt;5&lt;/li&gt;
&lt;li&gt;6&lt;/li&gt;
&lt;li&gt;7&lt;/li&gt;
&lt;li&gt;8&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I want the result to be something like this:</p>

<pre><code>&lt;div id=firstgroup"&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
&lt;/div&gt;
&lt;div id=secondgroup"&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
&lt;/div&gt;
&lt;div id="thirdgroup"&gt;
    &lt;li&gt;5&lt;/li&gt;
    &lt;li&gt;6&lt;/li&gt;
&lt;/div&gt;
&lt;div id=fourthgroup"&gt;
    &lt;li&gt;7&lt;/li&gt;
    &lt;li&gt;8&lt;/li&gt;
&lt;/div&gt; 
</code></pre>

<p>and so on, 
So here, we are grouping every 2 element into a new div.</p>
