使用 jQuery 在 DIV 中包装列表中的元素集答案

【问题标题】：Wrapping sets of elements from a list in DIVs using jQuery使用 jQuery 在 DIV 中包装列表中的元素集
【发布时间】：2013-12-21 14:44:27
【问题描述】：

我有一个很长的名字列表，每个名字都会被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 中添加一个 2nd 类。

无论我从多少跨度开始，最终结果：

<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 将适应这种结果。

【问题讨论】：

您确实意识到row five 代表两个类row 和five 对吧？如果您打算将其作为一个类，则需要修改代码以编写如下类：row-five 或 rowFive 等。
对造成的混乱表示歉意。它们都需要是row，额外的类名对应于行中的项目数。他们最终将拥有两个类名。例如，有五个项目的行需要附加类 five。

标签： javascript jquery each

【解决方案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" />');
}

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

【讨论】：