Wrap elements inside a div using jQuery

Question

I have this:

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

I need to wrap all the p-tags inside a div like this:

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

can it be done with jQuery?

---

If I have more than one <div class="accordionTrigger"></div>, like this:

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

the result will be:

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

can I avoid that?

Answer 1

Check the .wrapAll() method:

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

The wrapAll() method will wrap all the elements matched into another element (compared to the .wrap() method which wraps the matched elements individually)

DEMO