title: Wrapping sets of elements from a list in DIVs using jQuery
body: <p>I have a very long list of names, each of which will be wrapped in  <code>span</code> tags.</p>
  
  <p>Example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span&gt;Yang Zajicek&lt;/span&gt;
  &lt;span&gt;Daniela Athey&lt;/span&gt;
  &lt;span&gt;Alanna Bumpers&lt;/span&gt;
  &lt;span&gt;Audry Waldron&lt;/span&gt;
  &lt;span&gt;Agnes Wininger&lt;/span&gt;
  &lt;span&gt;Tarah Mandelbaum&lt;/span&gt;
  &lt;span&gt;Dedra Paille&lt;/span&gt;
  &lt;span&gt;Codi Morrone&lt;/span&gt;
  &lt;span&gt;Shan Huntoon&lt;/span&gt;
  &lt;span&gt;Silas Zerangue&lt;/span&gt;
  &lt;span&gt;Thalia Saleh&lt;/span&gt;
  &lt;span&gt;Britt Spurlock&lt;/span&gt;
  &lt;span&gt;Miguelina Dasilva&lt;/span&gt;
  &lt;span&gt;Scott Scholz&lt;/span&gt;
  &lt;span&gt;Judith Badura&lt;/span&gt;
  &lt;span&gt;Alfredia Kidder&lt;/span&gt;
  &lt;span&gt;Jae Doty&lt;/span&gt;
  &lt;span&gt;Charise Blakeslee&lt;/span&gt;
  &lt;span&gt;Yen Axelson&lt;/span&gt;
  &lt;span&gt;Aurora Cochran&lt;/span&gt;
  &lt;span&gt;Lavina Crete&lt;/span&gt;
  &lt;span&gt;Monique Pate&lt;/span&gt;
  &lt;span&gt;Lady Edelstein&lt;/span&gt;
  &lt;span&gt;Clark Summitt&lt;/span&gt;
  &lt;span&gt;Milagros Whetstone&lt;/span&gt;
  &lt;span&gt;Tracy Tokarski&lt;/span&gt;
  &lt;span&gt;Wendolyn Crafts&lt;/span&gt;
  &lt;span&gt;Sandra Clyde&lt;/span&gt;
  &lt;span&gt;Alyse Giltner&lt;/span&gt;
  &lt;span&gt;Glennis Roos&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What is now required is that I must go through them, like a loop or with <code>each()</code>, and I need to wrap groups of these with <code>&lt;div class="row"&gt;&lt;/div&gt;</code>. I'm familiar enough with <code>wrap()</code> and basic looping, but I'm running into too many bugs trying to determine the logic for the pattern of when and where to wrap.</p>
  
  <p>The pattern of wrapping is as follows:</p>
  
  <ul>
  <li>Go through all of the spans, wrapping them in groups of 5 and 6,
  repeating this pattern until all are wrapped. Add an in addition to the class mentioned above, add a 2nd class to each <code>div</code> related to the number of items.</li>
  </ul>
  
  <p>End result, regardless of how many spans I start with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row five"&gt;
    &lt;span&gt;Yang Zajicek&lt;/span&gt;
    &lt;span&gt;Daniela Athey&lt;/span&gt;
    &lt;span&gt;Alanna Bumpers&lt;/span&gt;
    &lt;span&gt;Audry Waldron&lt;/span&gt;
    &lt;span&gt;Agnes Wininger&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="row six"&gt;
    &lt;span&gt;Tarah Mandelbaum&lt;/span&gt;
    &lt;span&gt;Dedra Paille&lt;/span&gt;
    &lt;span&gt;Codi Morrone&lt;/span&gt;
    &lt;span&gt;Shan Huntoon&lt;/span&gt;
    &lt;span&gt;Silas Zerangue&lt;/span&gt;
    &lt;span&gt;Thalia Saleh&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="row five"&gt;
    &lt;span&gt;Britt Spurlock&lt;/span&gt;
    &lt;span&gt;Miguelina Dasilva&lt;/span&gt;
    &lt;span&gt;Scott Scholz&lt;/span&gt;
    &lt;span&gt;Judith Badura&lt;/span&gt;
    &lt;span&gt;Alfredia Kidder&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="row six"&gt;
    &lt;span&gt;Jae Doty&lt;/span&gt;
    &lt;span&gt;Charise Blakeslee&lt;/span&gt;
    &lt;span&gt;Yen Axelson&lt;/span&gt;
    &lt;span&gt;Aurora Cochran&lt;/span&gt;
    &lt;span&gt;Lavina Crete&lt;/span&gt;
    &lt;span&gt;Monique Pate&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="row five"&gt;
    &lt;span&gt;Lady Edelstein&lt;/span&gt;
    &lt;span&gt;Clark Summitt&lt;/span&gt;
    &lt;span&gt;Milagros Whetstone&lt;/span&gt;
    &lt;span&gt;Tracy Tokarski&lt;/span&gt;
    &lt;span&gt;Wendolyn Crafts&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="row six"&gt;
    &lt;span&gt;Sandra Clyde&lt;/span&gt;
    &lt;span&gt;Alyse Giltner&lt;/span&gt;
    &lt;span&gt;Glennis Roos&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The last row can contain 1-6 items, which will vary, but the class name must follow the pattern of "row five" or "row six." The CSS will accommodate this outcome.</p>