Splitting an unordered list into multiple divs using jQuery and Javascript
<p>I have an unordered list comprised of little bits of HTML (images, styled text, forms, etc.). The number of items in the list is a variable between 1 and 10. How can I create a pagination system such that all the list items are shown in one DIV if there are 5 or less items, and another DIV is created and filled with the overflow if there are more than 5 items?</p>

<p>For example here is a list with an arbitrary number of elements (in this case, seven):</p>

<pre><code> &lt;ul&gt;
      &lt;li&gt;&lt;img src="photo.jpg" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;TEXT TEXT TEXT&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="another_photo.jpg" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;MORE TEXT TEXT TEXT&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" onClick="alert('Hello There');"&gt;Say Hello!&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;MORE STUFF&lt;/li&gt;
      &lt;li&gt;YET EVEN MORE STUFF&lt;/li&gt;
 &lt;/ul&gt;
</code></pre>

<p>And this would be the resulting DIVs</p>

<pre><code> &lt;div id="first_div"&gt;
      &lt;ul&gt;
           &lt;li&gt;&lt;img src="photo.jpg" /&gt;&lt;/li&gt;
           &lt;li&gt;&lt;strong&gt;TEXT TEXT TEXT&lt;/strong&gt;&lt;/li&gt;
           &lt;li&gt;&lt;img src="another_photo.jpg" /&gt;&lt;/li&gt;
           &lt;li&gt;&lt;strong&gt;MORE TEXT TEXT TEXT&lt;/strong&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#" onClick="alert('Hello There');"&gt;Say Hello!&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
 &lt;/div&gt;
 &lt;div id="second_div"&gt;
      &lt;ul&gt;
           &lt;li&gt;MORE STUFF&lt;/li&gt;
           &lt;li&gt;YET EVEN MORE STUFF&lt;/li&gt;
      &lt;/ul&gt;
 &lt;/div&gt;
</code></pre>
