jquery, avvolgere gli elementi all'interno di un div

Question

ho questo:

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

ho bisogno di avvolgere tutti i p-tag all'interno di un div come questo:

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

può essere fatto con jQuery?

---

Se ho più di un <div class="accordionTrigger"></div>, in questo modo:

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

il risultato sarà:

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

posso evitare questo?

Answer 1

Controllare il metodo .wrapAll():

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

Il metodo wrapAll() vi avvolgerà tutti gli elementi corrispondenti in un altro elemento (rispetto al metodo .Wrap(), che avvolge gli elementi abbinati singolarmente)

DEMO

Answer 2

controllare questo che tutto si risolverà come da aspettativa

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