为每个 div 增加 z-index

Question

I am working on a design where divs overlay each other and I do to separately increment z-index by 1 for each member of a class. And I feel like there is a better way to do it with jquery .

What I want is something like for each div with the class section to have a z-index greater by than the previous but not being thrown off by divs which are not members of the specific class such as

<div class="section" style="z-index:1">Lorem</div>
<div class="section" style="z-index:2">Lorem</div>
<div id="OutOfPlaceDiv">Foo</div>
<div class="section" style="z-index:3">Lorem</div>

Answer 1

Use the each method to iterate through the elements with that class.

$('.section').each(function(index) {
  $(this).css("z-index", index);
});

This will set the indexes to 0, 1, 2 etc. If you want to start at something other than 0 :

var offset = 1;
$('.section').each(function(index) {
  $(this).css("z-index", offset + index);
});

Answer 2

A dirty css hack but simple and effective if you have just dozen of div:

.section:nth-child(1) { z-index: 1; }
.section:nth-child(2) { z-index: 2; }
.section:nth-child(3) { z-index: 3; }
...