如何将元素集包装成div?

时间:2016-12-06 17:58:12

标签: javascript jquery html

我正在使用.wrap().wrapAll() jQuery,但我似乎无法找到操作下面代码的解决方案。

我正在处理如此不太好的标记,并且我试图找出如何转换以下HTML:



    <p class="category">Category 1</p>
    <p class="item">Item</p>
    <p class="item">Item</p>
    <p class="item">Item</p>
    <p class="category">Category 2</p>
    <p class="item">Item</p>
    <p class="item">Item</p>
    <p class="item">Item</p>
    <p class="category">Category 3</p>
    <p class="item">Item</p>
    <p class="item">Item</p>
    <p class="item">Item</p>
&#13;
&#13;
&#13;

进入这个:

&#13;
&#13;
<div class="category-1">
  <p class="category">Category 1</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
</div>
<div class="category-2">
  <p class="category">Category 2</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
</div>
<div class="category-3">
  <p class="category">Category 3</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
</div>
&#13;
&#13;
&#13;

我需要从一个.category换行到下一个make_unique。我不需要包装每个部分的div必须是类别名称,我只是为这个问题命名。

1 个答案:

答案 0 :(得分:5)

迭代.category,然后通过到达下一个.category元素来包装元素。

&#13;
&#13;
$('.category').each(function(i) {
  $(this)
    // get element up to the next `.category` 
    .nextUntil('.category')

    // in case there is any other element as the sibling
    // then only get the paragraph element using
    // .filter('p.item')

    // add the current element to the object
    .add(this)
    // wrap it using the div
    .wrapAll($('<div/>', {
      class: 'category' + (i + 1)
    }))
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="category">Category 1</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
  <p class="category">Category 2</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
  <p class="category">Category 3</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
</div>
&#13;
&#13;
&#13;