title: Performance with jQuery .nextUntil on large DOM
body: <p>I'm looking to address a performance issue I'm having with a very large DOM. In essence, this a word-processing style app inside the browser using <code>contenteditable</code> <code>divs</code>.</p>
  
  <p>Suppose I have a structure like this:</p>
  
  <pre><code>&lt;div class="header"&gt;...&lt;/div&gt;
  &lt;div class="actor"&gt;...&lt;/div&gt;
  &lt;div class="director"&gt;...&lt;/div&gt;
  &lt;div class="producer"&gt;...&lt;/div&gt;
  &lt;div class="writer"&gt;...&lt;/div&gt;
  &lt;div class="executive"&gt;...&lt;/div&gt;
  &lt;div class="studio"&gt;...&lt;/div&gt;
  &lt;div class="footer"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>I then have some code which ends up returning (for example):</p>
  
  <pre><code>&lt;div class="writer"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>as a jQuery object. I then need to retrieve all of this object's surrounding <code>divs</code> between <code>header</code> and <code>footer</code> as a selection and then further filter this list using a <code>class</code> e.g. <code>'actor'</code>.</p>
  
  <p>Currently, I have the following code, which works correctly:</p>
  
  <pre><code>// Find header
  var header_object = object.prevUntil(".header").last().prev();
  
  // Select all objects between header and footer, and then filter 
  var object_list = header_object.nextUntil(".footer", ".actor");
  
  // Iterate through object_list 
  object_list.each(function()
  {
      // Run additional code on the objects
  });
  </code></pre>
  
  <p>The only problem is that due to the app being a word processor of sorts, the DOM structure is often very large (e.g. over 5000 elements) and executing this code locks up the browser for an unacceptable amount of time (over 10 - 30 seconds).</p>
  
  <p>As such, I'm looking for a way to customize the code I have to make it more efficient / improve performance.</p>
  
  <p>I should also point out that the HTML structure above is not <code>(header - 5000 elements - footer)</code>, rather it is 200 x <code>(header - elements - footer)</code>. As such, each traversal operation is only maybe 25 elements from header to footer, but it has to run many times.</p>
  
  <p>Any suggestions? Many thanks!</p>