Javascript 如何创建类似俄罗斯玩偶的z索引堆叠

我需要按以下方式设置CMS输出的

z-index

值：（注释表示z-index编号）。这是一个非常有趣的问题，对我来说，说明比解释更容易

把它想象成一个俄罗斯洋娃娃是很有帮助的，第一个

中的
是外层，下一个
是第二个洋娃娃，依此类推

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










类似地，由于可以使用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很好

任何帮助是感激的，让我知道如果这是一个重复，因为我不知道什么是正确的关键字搜索。谢谢。
假设
.bg
后面总是跟着
.fg
：

您需要获取类名为
fg
和
bg
的元素，通过它们循环并设置它们的z索引：


var bgs=document.getElementsByClassName（“bg”）；
var fgs=document.getElementsByClassName（“fg”）；
var max=fgs.length*2；
对于（变量i=0；i










假设
.bg
后面总是跟着
.fg
：

您需要获取类名为
fg
和
bg
的元素，通过它们循环并设置它们的z索引：


var bgs=document.getElementsByClassName（“bg”）；
var fgs=document.getElementsByClassName（“fg”）；
var max=fgs.length*2；
对于（变量i=0；i










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

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

$total=计数（$items）；
$max_z_index=$total*2；
对于（$i=0；$iforeground；
$background=$items[$i]->background；
$foreground_z_index=$max_z_index-$i；
$background_z_index=$i；
回声“；
回声“；
}
另一个选项是在CMS中添加z索引

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

$total=计数（$items）；
$max_z_index=$total*2；
对于（$i=0；$iforeground；
$background=$items[$i]->background；
$foreground_z_index=$max_z_index-$i；
$background_z_index=$i；
回声“；
回声“；
}
这是非常独特的…您确认过以这种方式手动设置这些z索引会得到您想要的结果吗？以及，到目前为止您尝试过什么JS代码？没有，所以我问了。是的，z索引在使用inspectorI应用时有效。我建议查看.each（）当然还有.child（）和.parent（）。没有人会为您编写代码，但当您陷入困境时，我们会帮助您。作为开发人员对开发人员：请关闭您的img标签（）这是非常独特的…您确认过以这种方式手动设置这些z索引会得到您想要的结果吗？还有，到目前为止您尝试过什么JS代码？没有，所以我问了。是的，z索引在使用inspectorI应用时有效。我建议查看.each（）当然还有.child（）和.parent（）。没有人会为您编写代码，但当您陷入困境时，我们会帮助您。作为一名开发人员对一名开发人员：请关闭您的img标签（）“我正在寻找一个理想的jQuery解决方案，因为它更易于同事维护，但普通JS很好。”“我正在寻找一个理想的jQuery解决方案，因为它更易于同事维护，但普通JS很好。”它很漂亮！谢谢！谢谢
$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'>";
}