JQuery, завернуть элементы внутри DIV

Question

У меня есть это:

<div>content element</div> 
<div class="accordionTrigger"> 
    <div><h1>title</h1></div> 
    <p>text</p> 
    <p>text</p> 
    <p>text</p> 
    ... 
</div> 
<div>content element</div> 
<div>content element</div> 

мне нужно обернуть все р-теги внутри DIV, как это:

<div>content element</div> 
    <div class="accordionTrigger"> 
     <div><h1>title</h1></div> 
     <div class="moreInfo">  
     <p>text</p> 
     <p>text</p> 
     <p>text</p> 
     ... 
     </div> 
    </div> 
    <div>content element</div> 
    <div>content element</div> 

это может быть сделано с JQuery?

---

Если у меня есть более чем один <div class="accordionTrigger"></div>, как это:

<div>content element</div> 
<div class="accordionTrigger"> 
    <div><h1>title</h1></div> 
    <p>text</p> 
    <p>text</p> 
    ... 
</div> 
<div>content element</div> 
<div class="accordionTrigger"> 
    <div><h1>title</h1></div> 
    <p>text</p> 
    <p>text</p> 
    ... 
</div> 

результат будет:

<div>content element</div> 
<div class="accordionTrigger"> 
    <div><h1>title</h1></div> 
    <p>text</p> 
    <p>text</p> 
    <p>text</p> 
    <p>text</p> 
    ... 
</div> 
<div>content element</div> 
<div class="accordionTrigger"> 
    <div><h1>title</h1></div> 
</div> 

я могу избежать этого?

Answer 1

Проверьте .wrapAll() метод:

$('.accordionTrigger p').wrapAll('<div class="moreInfo"></div>'); 

Метод wrapAll() будет обернуть все элементы совпавшие в другой элемент (по сравнению с методом .wrap(), который обертывает соответствующие элементы по отдельности)

DEMO

Answer 2

Проверить это будет работать, как в ожидании

<div>content element</div> 
<div class="accordionTrigger"> 
    <div><h1>title</h1></div> 


    <p>text</p> 
    <p>text</p> 
    <p>text</p> 
    <script type="text/javascript"> 
     $("p").wrapAll("<div class='moreinfo'/>"); 
    </script> 
</div> 
<div>content element</div> 
<div>content element</div>