title: How do I assign an incremental z-index # for each H2 using Jquery
body: <p>Using Jquery,
  How do I assign an incremental z-index # for each H2, incrementing by 2's?  (when document is ready, start with the first H2 and give it a z-index of 2, then go to the next H2 and give it a z-index of 4.... etc. z-index of the next H2 is 6 etc.
  <strong>example:</strong></p>
  
  <pre><code>&lt;H2 style="z-index: 2;"&gt;heading one&lt;/h2&gt;
  &lt;H2 style="z-index: 4;"&gt;heading two&lt;/h2&gt;
  &lt;H2 style="z-index: 6;"&gt;heading three&lt;/h2&gt;
  &lt;H2 style="z-index: 8;"&gt;heading four&lt;/h2&gt;
  </code></pre>
  
  <p>I want the jquery to inject the z-index part on doc ready.<br>
  I don't know how, but i've seen people using these snippets in their code to somehow help create the effect:</p>
  
  <pre><code>zIndex += 2;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$(".fakeheading").css('zIndex', parseInt($header.css('zIndex'))+1)
  </code></pre>