Overflow one ul element into the next
<p>I have a number of <code>ul</code> elements on a page. I want to artifically limit the number of <code>li</code> elements it can contain. When that limit is reached, I want it to overflow to the next <code>ul</code> on the page (until it too reaches a limit and overflows to the next). And so on.</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;/ul&gt;
</code></pre>

<p>In the above example, I'd limit it to 4 list items, and then overflow to the next <code>&lt;ul&gt;</code>:</p>

<pre><code>&lt;ul&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'd like to do this using jquery. Thank you. </p>
