如何將一組元素包裝到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>