title: Loop through each element and print value in order
body: <p>I have some code where I want to loop through the amount of elements and set the text inside each one from 1 through however many there are. My approach is below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var items = $(".item");
    items.each(function(i) {
      var itemCount = i + 1;
      items.text(itemCount);
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;span class="item"&gt;&lt;/span&gt;
  &lt;span class="item"&gt;&lt;/span&gt;
  &lt;span class="item"&gt;&lt;/span&gt;
  &lt;span class="item"&gt;&lt;/span&gt;
  &lt;span class="item"&gt;&lt;/span&gt;
  &lt;span class="item"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It's however printing the total number 6 times. In this specific example, 6. </p>
  
  <p>The way I understood <code>.each()</code> is that it iterates each element individually and my thinking was that I would be able to pass in the value of <code>itemCount</code> and have it count each element individually. If I did a regular vanilla JS loop the results in the snippet would make sense since it completes before it prints. </p>
  
  <p>How can I change this approach to print the numbers in order (1 2 3 4 5 6) rather than the total amount of elements 6 times?</p>