title: Surrounding elements using JQuery - before() not doing what I want
body: <p>I have some HTML and I am calling each <code>H1</code> using <code>.each()</code>.  I <strong>WANT</strong> to not only surround the H1's but all the content below it -until the next <code>H1</code>- with a div.</p>
  
  <p>If I try something like:</p>
  
  <pre><code>$('#presentationcontent h1').each(function (index) {
        $(this).before('&lt;div&gt;');
  </code></pre>
  
  <p>It closes the div for me... I wanted to do something like this: </p>
  
  <pre><code> $('#presentationcontent h1').each(function (index) {
          counter++;
          if (counter == 1) 
          {
              $(this).before('&lt;div class="headingSections" style="border: 1px"&gt;');
          }
          else
          {
             $(this).before('&lt;/div&gt;&lt;div class="headingSections" style="border: 1px"&gt;');
          }
  </code></pre>
  
  <p>Hoping that I could set the first <code>H1</code> to <code>&lt;div&gt;</code> and every other one to close the <code>&lt;div&gt;</code> and open a new one... that way ALL THE CONTENT under the <code>H1</code> gets included.  </p>
  
  <p>Anything?</p>