title: Add class to div with number increasing for each div
body: <p>I'm wanting to add a class 'slide-number-x' to an element within each slide in a slider, with the 'x' representing the slide number in the dom. </p>
  
  <p>So, for example this simple HTML markup:</p>
  
  <pre><code>&lt;div class="slider"&gt;
      &lt;div class="slide"&gt;&lt;div class="slide-title"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="slide"&gt;&lt;div class="slide-title"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="slide"&gt;&lt;div class="slide-title"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="slide"&gt;&lt;div class="slide-title"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Would become:</p>
  
  <pre><code>&lt;div class="slider"&gt;
      &lt;div class="slide slide-number-1"&gt;&lt;div class="slide-title"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="slide slide-number-2"&gt;&lt;div class="slide-title"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="slide slide-number-3"&gt;&lt;div class="slide-title"&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="slide slide-number-4"&gt;&lt;div class="slide-title"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought this would work:</p>
  
  <pre><code>$('.slide').each(function(i){
    $(this).addClass('slide-number'i+1);
  });
  </code></pre>
  
  <p>Any help or ideas?</p>
  
  <p>Many thanks,
  R</p>