Wrap all elements up until :nth-child
<p>I am having a hard time figuring this out, but I am sure it is simple. </p>

<p>I know that I have to use <code>:nth-child</code> to count every set of elements I want to wrap.  I am wondering how I would count to <code>:nth-child</code> and wrap all the previous elements including the <code>:nth-child</code> in a div for each set of elements that match <code>:nth-child</code>.  I am assuming there is an <code>.each()</code> involved.</p>

<p>The code would be laid out like so:</p>

<pre><code>&lt;div class="wrapper"&gt; 
&lt;h3&gt;Heading&lt;/h3&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;

&lt;h3&gt;Heading&lt;/h3&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;


&lt;h3&gt;Heading&lt;/h3&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;


&lt;h3&gt;Heading&lt;/h3&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Update</strong>  Tried this piece of code and it seems to give me the desired results, but stops at 16.</p>

<pre><code>  $(".wrapper").each( function () {
$(this).children(":lt(16)").wrapAll("&lt;div&gt;&lt;/div&gt;")
});
</code></pre>
