Question

I have some HTML and I am calling each H1 using .each(). I WANT to not only surround the H1’s but all the content below it -until the next H1– with a div.

If I try something like:

$('#presentationcontent h1').each(function (index) {
      $(this).before('<div>');

It closes the div for me… I wanted to do something like this:

 $('#presentationcontent h1').each(function (index) {
        counter++;
        if (counter == 1) 
        {
            $(this).before('<div class="headingSections" style="border: 1px">');
        }
        else
        {
           $(this).before('</div><div class="headingSections" style="border: 1px">');
        }

Hoping that I could set the first H1 to <div> and every other one to close the <div> and open a new one… that way ALL THE CONTENT under the H1 gets included.

Anything?

Answer 1

Making assumptions about your HTML setup, the following would do the trick:

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

Here is a jsFiddle of it working.