使用jQuery从DIV中的列表中包装元素集 [英] Wrapping sets of elements from a list in DIVs using jQuery

问题描述

我有很长的名字列表，每个名字都将包裹在span标记中.

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

示例:

<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()和基本循环非常熟悉，但是我遇到了很多错误，这些错误试图确定何时何地包装模式的逻辑.

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.

包装模式如下:

• 遍历所有跨度，将其分为5和6组 重复此模式，直到所有内容都被包裹为止.除了上述类之外，还为每个div添加一个与项目数量相关的第二类.

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

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

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.

推荐答案

这里是一种解决方案:

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.

这篇关于使用jQuery从DIV中的列表中包装元素集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！