javascript - 如何创建类似俄罗斯套娃的 z-index 堆叠

Question

我需要设置一个 z-index CMS 输出的值以下列方式:(注释指示 z-index 编号)。这是一个非常有趣的问题，对我来说说明比解释更容易。

把它想象成一个俄罗斯套娃是有帮助的，其中 <img> s在第一个<li>是外层，下<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>