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