WEBTODESIGN

【JavaScript】リスト要素のz-indexを逆順にする

ネガティブマージンでリスト要素を重ねたときに、左にあるものがz-indexが大きくなって欲しい…。

それを制御するJavaScriptコードです。

解説

htmlが以下のような構成だとします。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

それぞれのリストの中で、上のliからz-indexを大きい値にします。
最低限のJSは以下です。

const ul = document.querySelectorAll('ul');
ul.forEach(e => {
    const li = e.querySelectorAll('li');
    let n = 0;
    for(let i = li.length - 1; i >= 0; i--){
        li[i].style.zIndex = n;
        n++;
    }
})

liの個数分、forで回しています。

実用

実際に使用する場合は以下のように使っています。

/*
*
*   z-indexを大きい順に指定
*
*/
const zindexEvent = () =>{
    const ul = document.querySelectorAll('ul');
    if(ul.length !== 0){
        ul.forEach(e => {
            const li = e.querySelectorAll('li');
            let n = 0;
            for(let i = li.length - 1; i >= 0; i--){
                li[i].style.zIndex = n;
                n++;
            }
        })
    }
}
window.addEventlistner('DOMContentLoaded', () => zindexEvent());

RECOMMENDATION

NEWEST