Question

I need to create a new div around each block of content after each h3 so that it complies with the markup in http://jqueryui.com/demos/accordion/default.html
such that for repeating code block:

<h3><a href="#">Section heading</a></h3>
**<div>**
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
**</div>**

<h3>next section</h3>
... etc...

I’ve tried $('h3').nextUntil('h3').wrap('<div>'); but this wraps a div around each element.
Any other ideas gratefully accepted? Thanks.

Answer 1

Example: http://jsfiddle.net/zBGMw/

$('h3').each(function() {
    $(this).nextUntil('h3').wrapAll('<div/>');
});