title: Separating content within div with Jquery
body: <p>I have the following HTML:</p>
  <pre><code>&lt;div class=&quot;page&quot;&gt;
    &lt;div class=&quot;somecontent_1&quot;&gt;...&lt;/div&gt;
    &lt;div class=&quot;somecontent_2&quot;&gt;...&lt;/div&gt;
    &lt;div class=&quot;somecontent_3&quot;&gt;...&lt;/div&gt;
    &lt;div class=&quot;somecontent_4&quot;&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Now I'd like to separate the content with a separate page so it looks something like this:</p>
  <pre><code>&lt;div class=&quot;page&quot;&gt;
    &lt;div class=&quot;somecontent&quot;&gt;...&lt;/div&gt;
    &lt;div class=&quot;somecontent&quot;&gt;...&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;newpage&quot;&gt;
    &lt;div class=&quot;somecontent&quot;&gt;...&lt;/div&gt;
    &lt;div class=&quot;somecontent&quot;&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The function checks the height of each class <code>somecontent</code> and if it's larger than a certain amount, I need to move the content to a new page.
  My guess is that I would need to create an empty div (newpage) and then fetch the elements after the height is exceeded and move them to the empty newpage and continue iterate like that.</p>
  <p>My question would be how I would get all content that are after the last element that reached the height so I can move it to the new empty page that I would create. Other solutions are most welcome if there is a better way of doing it!</p>
  <p>The code I came up with looks like this:</p>
  <pre><code>    var page = $('.page');
      var pageHeight = 0;
      $.each(page.find('.somecontent'), function() {
        if (pageHeight &gt; 1000) {
          page.next('&lt;div class=&quot;newpage&quot;&gt;&lt;/div&gt;');
          /* Somehow get all elements to add to the newly created page */
          page.next('.newpage').append(&lt;NEXT_ELEMENTS&gt;);
          pageHeight = 0;
        }
        pageHeight = pageHeight + $(this).height();
      });
  </code></pre>