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>