title: Wrap all elements up until :nth-child
body: <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>