How to wrap h1 and follow content in div?

Question

I need to know how to wrap h1 and follow content in div. This is the original structure:

<h1>Title #1</h1>
<p>Text</p>
<p>Text</p>

<h1>Title #2</h1>
<p>Text</p>
<p>Text</p>
<p>Text</p>

<h1>Title #3</h1>
<p>Text</p>

This is the result I want to get :

<div>
  <h1>Title #1</h1>
  <p>Text</p>
  <p>Text</p>
</div>

<div>
  <h1>Title #2</h1>
  <p>Text</p>
  <p>Text</p>
  <p>Text</p>
</div>

<div>
  <h1>Title #3</h1>
  <p>Text</p>
</div>

@DoryZidon I think he wants to automate the section detection in DOM. — Vedran Šego, Jun 03 '13 at 15:01
@Zenith One difference is that it doesn't include the `h1` itself. — Selvakumar Arumugam, Jun 03 '13 at 15:08

score 7 · Accepted Answer · answered Jun 03 '13 at 15:03

7

Try using wrapAll and group the h1 and all p tags

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

DEMO: http://jsfiddle.net/zPafK/

or http://jsfiddle.net/zPafK/2/ (added some styles)

answered Jun 03 '13 at 15:03

Selvakumar Arumugam

79,297
15
120
134

Thank you, fast anwser, I'll give a try rightaway. – geemeetheway Jun 03 '13 at 15:19

How to wrap h1 and follow content in div?

1 Answers1

Linked