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

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