jquery, quấn yếu tố bên trong một div

Question

Tôi có điều này:

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

tôi cần phải bọc tất cả các p-thẻ bên trong một div như thế này:

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

nó có thể được thực hiện với jQuery?

---

Nếu tôi có nhiều hơn một <div class="accordionTrigger"></div>, như thế này:

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

kết quả sẽ là:

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

tôi có thể tránh điều đó?

Answer 1

Kiểm tra .wrapAll() phương pháp:

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

Các wrapAll() phương pháp sẽ quấn tất cả các yếu tố phù hợp vào yếu tố khác (so với phương pháp .wrap() mà kết thúc tốt đẹp các yếu tố phù hợp với cá nhân)

DEMO

Answer 2

Kiểm tra này nó sẽ làm việc ra theo kỳ vọng

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