Question

我需要按以下方式设置CMS输出的z-index值:(注释表示z-index编号）。这是一个非常有趣的问题，我更容易说明而不是解释。

将它想象成俄罗斯娃娃是有帮助的，其中第一个<img>中的<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>的数量不受限制，因为可以使用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索引：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

另一种选择是在CMS中添加z索引。

循环浏览要添加的项目并设置它们可能类似于以下内容（在简单的php中）

ZonedDateTime followingTuesday = zdt.with( TemporalAdjustors.next( DayOfWeek.TUESDAY ) );

如何创建一个俄罗斯娃娃般的z-index堆叠

2 个答案: