Question

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.
example:

<H2 style="z-index: 2;">heading one</h2>
<H2 style="z-index: 4;">heading two</h2>
<H2 style="z-index: 6;">heading three</h2>
<H2 style="z-index: 8;">heading four</h2>

I want the jquery to inject the z-index part on doc ready.
I don’t know how, but i’ve seen people using these snippets in their code to somehow help create the effect:

zIndex += 2;

and

$(".fakeheading").css('zIndex', parseInt($header.css('zIndex'))+1)

Answer 1

$("h2").each( 
    function(index) { 
        $(this).css( "z-index", index*2+2 ); 
    } 
);