title: How to split content below every h3 with jQuery?
body: <p>I have a peace of html that looks like this:</p>
  
  <pre><code>&lt;h3&gt;PETIT DEJEUNER&lt;/h3&gt;
  &lt;p&gt;FRANS ONTBIJT&lt;/p&gt;
  &lt;p&gt;CROISSANT&lt;/p&gt;
  &lt;p&gt;CROISSANT&lt;/p&gt;
  
  &lt;h3&gt;AUTRE PETIT DEJEUNER&lt;/h3&gt;
  &lt;p&gt;FRANS ONTBIJT&lt;/p&gt;
  &lt;p&gt;CROISSANT&lt;/p&gt;
  &lt;p&gt;CROISSANT&lt;/p&gt;
  
  &lt;h3&gt;AND ONE MORE DEJEUNER&lt;/h3&gt;
  &lt;p&gt;FRANS ONTBIJT&lt;/p&gt;
  &lt;p&gt;CROISSANT&lt;/p&gt;
  &lt;p&gt;CROISSANT&lt;/p&gt;
  </code></pre>
  
  <p>Of course the contents vary. Unfortunately I do not control the html, it is delivered from another source. Can I split the content at every h3, creating a collection like this:</p>
  
  <pre><code>menu = [
      {
          title: 'PETIT DEJEUNER',
          contents: [&lt;p contents&gt;,&lt;p contents&gt;,&lt;pcontents&gt;]
      },
      {
          title: 'AUTRE PETIT DEJEUNER',
          contents: [&lt;p contents&gt;,&lt;p contents&gt;,&lt;pcontents&gt;]
      },
  ]
  </code></pre>
  
  <p>I'm using jQuery. Thanks!</p>