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>