Separate an HTML document with headings into sections

Question

How can I separate in sections a document with headings?

Convert this

<h1>chapter 1</h1>
<p>lorem ipsum</p>
<p>sit amet</p>
<h1>chapter 2</h1>
<p>lorem ipsum</p>
<p>sit amet</p>

into this

<div class="chapter">
  <h1>chapter 1</h1>
  <p>lorem ipsum</p>
  <p>sit amet</p>
</div>
<div class="chapter">
  <h1>chapter 2</h1>
  <p>lorem ipsum</p>
  <p>sit amet</p>
</div>

I guess with jQuery this is easy, but I haven't figured how yet.

Answer 1

Try something like this:

$('h1').each( function(){
    $(this).nextUntil('h1').andSelf().wrapAll('<div class="chapter">');
});

Example: http://jsfiddle.net/redler/YVF2w/

Answer 2

I guess with jQuery this is easy, but I haven't figured how yet.

Don't do this with jQuery. Write this into your HTML, or use whatever view / template engine your using to write your HTML like this.

Also there is such a thing as <section> and <header> I would recommend using them (but since they are HTML5 you might need html5 shim).