Wrapping sets of elements from a list in DIVs using jQuery

Question

I have a very long list of names, each of which will be wrapped in span tags.

Example:

<span>Yang Zajicek</span>
<span>Daniela Athey</span>
<span>Alanna Bumpers</span>
<span>Audry Waldron</span>
<span>Agnes Wininger</span>
<span>Tarah Mandelbaum</span>
<span>Dedra Paille</span>
<span>Codi Morrone</span>
<span>Shan Huntoon</span>
<span>Silas Zerangue</span>
<span>Thalia Saleh</span>
<span>Britt Spurlock</span>
<span>Miguelina Dasilva</span>
<span>Scott Scholz</span>
<span>Judith Badura</span>
<span>Alfredia Kidder</span>
<span>Jae Doty</span>
<span>Charise Blakeslee</span>
<span>Yen Axelson</span>
<span>Aurora Cochran</span>
<span>Lavina Crete</span>
<span>Monique Pate</span>
<span>Lady Edelstein</span>
<span>Clark Summitt</span>
<span>Milagros Whetstone</span>
<span>Tracy Tokarski</span>
<span>Wendolyn Crafts</span>
<span>Sandra Clyde</span>
<span>Alyse Giltner</span>
<span>Glennis Roos</span>

What is now required is that I must go through them, like a loop or with each(), and I need to wrap groups of these with <div class="row"></div>. I'm familiar enough with wrap() 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.

The pattern of wrapping is as follows:

• 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 div related to the number of items.

End result, regardless of how many spans I start with:

<div class="row five">
  <span>Yang Zajicek</span>
  <span>Daniela Athey</span>
  <span>Alanna Bumpers</span>
  <span>Audry Waldron</span>
  <span>Agnes Wininger</span>
</div>
<div class="row six">
  <span>Tarah Mandelbaum</span>
  <span>Dedra Paille</span>
  <span>Codi Morrone</span>
  <span>Shan Huntoon</span>
  <span>Silas Zerangue</span>
  <span>Thalia Saleh</span>
</div>
<div class="row five">
  <span>Britt Spurlock</span>
  <span>Miguelina Dasilva</span>
  <span>Scott Scholz</span>
  <span>Judith Badura</span>
  <span>Alfredia Kidder</span>
</div>
<div class="row six">
  <span>Jae Doty</span>
  <span>Charise Blakeslee</span>
  <span>Yen Axelson</span>
  <span>Aurora Cochran</span>
  <span>Lavina Crete</span>
  <span>Monique Pate</span>
</div>
<div class="row five">
  <span>Lady Edelstein</span>
  <span>Clark Summitt</span>
  <span>Milagros Whetstone</span>
  <span>Tracy Tokarski</span>
  <span>Wendolyn Crafts</span>
</div>
<div class="row six">
  <span>Sandra Clyde</span>
  <span>Alyse Giltner</span>
  <span>Glennis Roos</span>
</div>

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.

Answer 1

Here's one solution:

http://jsfiddle.net/QWHYK/

while ($('#list > span').length) {
    $('#list > span:lt(5)').wrapAll('<div class="row five" />');
    $('#list > span:lt(6)').wrapAll('<div class="row six" />');
}

You could probably improve it with a little caching, but the logic is there.