jquery - 为每个 div 增加 z-index

Question

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

我想要的是，每个具有类 section 的 div 都有一个 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);
});