如何创建一个俄罗斯娃娃般的z索引堆叠

Question

我需要通过以下方式设置CMS输出的z-index值：（注释指示z索引号）。这是一个很有趣的问题，对我来说说明起来容易解释起来难。

把它想象成一个俄罗斯娃娃是有帮助的，第一个<li>中的<img>是外层，下一个<li>是第二个娃娃，依此类推

<ul>
    <li>
        <img class="bg"> <!-- 1 -->
        <img class="fg"> <!-- 6 -->
    </li>
    <li>
        <img class="bg"> <!-- 2 -->
        <img class="fg"> <!-- 5 -->
    </li>
    <li>
        <img class="bg"> <!-- 3 -->
        <img class="fg"> <!-- 4 -->
    </li>
</ul>

类似地，<li>s的数量不受限制，因为使用CMS可以生成更多。

<ul>
    <li>
        <img class="bg"> <!-- 1 -->
        <img class="fg"> <!-- 8 -->
    </li>
    <li>
        <img class="bg"> <!-- 2 -->
        <img class="fg"> <!-- 7 -->
    </li>
    <li>
        <img class="bg"> <!-- 3 -->
        <img class="fg"> <!-- 6 -->
    </li>
    <li>
        <img class="bg"> <!-- 4 -->
        <img class="fg"> <!-- 5 -->
    </li>
</ul>

我正在寻找一个理想的jQuery解决方案，因为它对同事来说更容易维护，但普通JS也可以。

感谢您的帮助，如果这是重复的，请告诉我，因为我不确定搜索什么是正确的关键字。谢谢

Answer 1

假设.bg后面总是跟一个.fg:

您需要获得类名为fg和bg的元素，在它们之间循环并设置它们的z索引：

var bgs = document.getElementsByClassName("bg");
var fgs = document.getElementsByClassName("fg");
var max = fgs.length * 2;
for (var i = 0; i < bgs.length; i++) {
  bgs[i].style.zIndex = i + 1;
  fgs[i].style.zIndex = max - i;
}

<ul>
    <li>
        <img class="bg"> <!-- 1 -->
        <img class="fg"> <!-- 8 -->
    </li>
    <li>
        <img class="bg"> <!-- 2 -->
        <img class="fg"> <!-- 7 -->
    </li>
    <li>
        <img class="bg"> <!-- 3 -->
        <img class="fg"> <!-- 6 -->
    </li>
    <li>
        <img class="bg"> <!-- 4 -->
        <img class="fg"> <!-- 5 -->
    </li>
</ul>

Answer 2

另一个选项是在CMS中添加z索引。

循环浏览要添加的项目并设置它们可能看起来像以下（在简单的php中）

$total = count($items);
$max_z_index = $total * 2;
for($i=0;$i<$total;$i++){
    $foreground = $items[$i]->foreground;
    $background = $items[$i]->background;
    $foreground_z_index = $max_z_index - $i;
    $background_z_index = $i;
    echo "<img style='z-index:$foreground_z_index;' src='$foreground'>";
    echo "<img style='z-index:$background_z_index;' src='$background'>";
}