It seems .wrapAll()
was the missing link.
$('h3').nextUntil('h3').addBack().wrapAll('<div>');
Question
I've got some markup that's similar to the following:
<h3>A Heading</h3>
<p>Here is a paragraph.</p>
<ul>
<li>First</li>
<li>Second</li>
</ul>
<blockquote>Here's some other block-level element</blockquote>
<h3>The Wrapping Should Stop Before This Heading, but a Second One Should Begin</h3>
<ol>
<li>First</li>
<li>Second</li>
</ol>
<p>Notice the varying block-level elements? It probably doesn't make any difference.</p>
I want to wrap each h3
and everything up to, but not including, the next h3
in a single div
.
The result should be:
<div>
<h3>A Heading</h3>
<p>Here is a paragraph.</p>
<ul>
<li>First</li>
<li>Second</li>
</ul>
<blockquote>Here's some other block-level element</blockquote>
</div>
<div>
<h3>The Wrapping Should Stop Before This Heading, but a Second One Should Begin</h3>
<ol>
<li>First</li>
<li>Second</li>
</ol>
<p>Notice the varying block-level elements? It probably doesn't make any difference.</p>
</div>
I've found similar questions like this one. It uses a combination of .nextUntil()
and .andSelf()
(or .addBack()
once my edit is approved), but this would wrap the h3
s and the content between in separate div
s.
Solution
It seems .wrapAll()
was the missing link.
$('h3').nextUntil('h3').addBack().wrapAll('<div>');
OTHER TIPS
You need the :first
selector otherwise you will wrap all the content not just the first h3
to 2nd h3
$('h3:first').nextUntil('h3').addBack().wrapAll('<div>');