使用jQuery从DIV中的列表中包装元素集

Question

我有一个很长的名单,每个名字都包含在 span标签中.

例:

<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>

现在需要的是我必须经历它们,如循环或使用each(),我需要将这些组包装起来<div class="row"></div>.我对wrap()基本循环很熟悉,但是我遇到了太多错误,试图确定包装时间和位置模式的逻辑.

包装的模式如下:

• 遍历所有跨度,将它们分组为5和6,重复此模式直到所有包裹.除了上面提到的类之外,还要添加一个div与项目数相关的第二个类.

最终结果,无论我开始使用多少跨度:

<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>

最后一行可以包含1-6个项目,这些项目会有所不同,但是类名称必须遵循"第五行"或"第六行"的模式.CSS将适应这一结果.

Answer 1

这是一个解决方案:

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" />');
}

您可以通过一点缓存来改进它,但逻辑就在那里.