增加每个div的z-index

Question

我正在开发一个div相互叠加的设计，我会为一个类的每个成员分别将z-index递增1。我觉得有更好的方法可以使用jquery。

我想要的是类似于每个div section使得z-index比前一个更大但不会被不是特定类的成员的div抛出，例如

<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

使用each方法迭代该类的元素。

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

这会将索引设置为0, 1, 2等。如果您想从0以外的其他内容开始：

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