ロシア人形のようなZ-インデックスの積み重ねを作成する方法

Question

z-indexのCMS出力の値を次のように設定する必要があります（コメントはz-インデックス番号を示します）。これは非常に興味深い問題であり、説明するよりも説明が簡単です。

それは最初<li>で<img> sが外層あるロシアの人形のようにそれを想像すると便利です、次<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インデックスを設定します。

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

さらに、zインデックスをCMSに追加することもできます。

追加する項目をループし、それらを設定すること。これは非常にユニークである（簡単な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'>"; 
}