jquery, zawinąć elementów wewnątrz div

Question

mam to:

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

muszę zawinąć wszystkie P-tagów wewnątrz div tak:

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

można to zrobić z jQuery?

---

Jeśli mam więcej niż jeden <div class="accordionTrigger"></div>, tak:

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

wynik będzie:

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

mogę tego uniknąć?

Answer 1

Sprawdź metodę .wrapAll():

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

Sposób wrapAll() zawinie wszystkie elementy dopasowane do innego elementu (w porównaniu do sposobu .wrap(), która otacza elementy dopasowane indywidualnie)

DEMO

Answer 2

Sprawdź to będzie działać na zewnątrz, jak na oczekiwania

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