title: Looping through jQuery objects in a collection without initializing a new jQuery object for each iteration
body: <p>I find myself doing this all the time:</p>
  
  <pre class="lang-js prettyprint-override"><code>$myElements.each( function(index, currentHtmltmlElement) {
    var $currentJqueryElement = $(currentHtmltmlElement);
    // Working with $currentJqueryElement
  });
  </code></pre>
  
  <p>Initializing a new jQuery object in each iteration is a huge performance penalty.</p>
  
  <p>So i thought of doing this instead (credit also goes to decx@freenode):</p>
  
  <pre class="lang-js prettyprint-override"><code>for (var index = 0; index &lt; $myElements.length; index++) {
    var $currentJqueryElement = $myElements.eq(i);
    // Working with $currentJqueryElement
  }
  </code></pre>
  
  <p>But i fixed up a <a href="http://jsperf.com/jquery-for-eq-vs-each" rel="nofollow">JSPerf test</a> and this snippet's performance turned out to be identical to that of the first snippet! :(</p>
  
  <p>Both are freaking slow! For really large collections, you could even notice the page freeze.</p>
  
  <p>So i wonder what is the fast way of iterating through jQuery objects in a collection.</p>
  
  <p>The way should also be as convenient to use as possible. This:</p>
  
  <pre class="lang-js prettyprint-override"><code>$items.each$item( function( $item, index ) { /* Working with $item directly. */ });
  </code></pre>
  
  <p>would be <em>way</em> better than the ancient <code>for (var i=0...</code> ineptitude.</p>
  
  <h2>UPD 2014-05-27</h2>
  
  <p>Here's an example. Imagine that you have a number of jQuery UI Sliders:
  </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;div class="my-slider"&gt;&lt;/div&gt;
  &lt;div class="my-slider"&gt;&lt;/div&gt;
  &lt;div class="my-slider"&gt;&lt;/div&gt;
  </code></pre>
  
  
  
  <pre class="lang-js prettyprint-override"><code>$sliders = $('.my-slider').slider();
  </code></pre>
  
  <p>Now you would like to log to console the value of each slider. You have to do:</p>
  
  <pre class="lang-js prettyprint-override"><code>$sliders.each( function(index, htmlSlider) {
    $current_slider = $(htmlSlider); // This step is a huge performance penalty
  
    console.log(
      $current_slider.slider('value')
    );
  });
  </code></pre>
  
  <p>So the task is to get rid of the performance penalty.</p>
  
  <p>You can't simply do <code>$sliders.slider('value')</code> because this will output the value only of the first slider in the collection.</p>
  
  <p>You can't revert to vanilla JS inside the loop because you can't access a jQuery widget without a jQuery object.</p>
  
  <p>So far, all these approaches...</p>
  
  <ul>
  <li><code>$sliders.each( function(index, htmlSlider) { htmlSlider });</code></li>
  <li><code>$sliders.each( function() { this });</code></li>
  <li><code>for (var i = 0; i &lt; $sliders.length; i++) { $sliders.eq(i); }</code></li>
  <li><code>$.each</code>, <code>$.makeArray</code>, <code>$.map</code>, etc</li>
  </ul>
  
  <p>...work with <code>$sliders</code>'s underlying array of HTML elements and require a time-costy <code>$( )</code> initialization to access jQuery features.</p>