Question

I have the following html snippet;

<h2>Headline 1</h2>
<p>Lorem ipsum bla bla</p>
<p>Lorem ipsum bla bla</p>
<p>Lorem ipsum bla bla</p>

<h2>Headline 2</h2>
<p>Lorem ipsum bla bla</p>

<h2>Headline 3</h2>
<p>Lorem ipsum bla bla</p>
<p>Lorem ipsum bla bla</p>

I wish to somehow, via jquery, target each “block” so i can append a div arround it. By “block” i mean all the code between h2 start-tag and down to the last p-tag, before the next h2 start-tag. The last h2-tag within the section, should just take the last p-tag.

Any suggestions as to how i best do this?

Answer 1

Try:

$('h2').each(function () {
    $(this).nextUntil('h2').add(this).wrapAll('<div class="foo">');
});​

http://jsfiddle.net/RUKDj/