Menu
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?
286
jQuery wrap() method is used to wrap specified HTML elements around each selected element. The wrap () function can accept any string or object that could be passed through the $() factory function. Syntax: $(selector).
The wrap() method wraps specified HTML element(s) around each selected element.
use Jquery . wrapAll() - It wraps the html structure around all the matched elements.
In general, you can't have an inline element, like an anchor (<a>) or span, wrap around a block level element like a division (<div>) or heading.
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
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
