如何将元素集包装成div？

Question

我正在使用.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>

进入：

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

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

Answer 1

迭代.category，然后通过升级到下一个.category元素来包装元素。

$('.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)
    }))
})

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