WEBTODESIGN

JavaScriptで配列の偶数番目・奇数番目で条件分岐する

配列の偶数番目・奇数番目で条件分岐がしたいことがあります。

割り算の余りを利用する

偶数・奇数を判別するのは簡単です。数字を２で割り切れれば偶数、割り切れなければ奇数です。

割り切れたかどうかは余りがあるかないかで見分けることができます。

余りを出してくれる演算子

数字を単純に２で割るなら

数字 / 2

とすればい良いですが、これでは余りが出ません。２で割った場合の余りを出したい時は

数字 % 2

というように % を使います。%は剰余を返してくれる演算子です。例えば3%2をすれば余りは1なので、1が返ってきます。

分岐に応用する

この%を分岐に応用してみます！

余りが出なければ、つまり、余りが0ならば偶数です。

例

const length = document.querySelectorAll('li').length;
for(i = 0; i < length; i++){
    if(i % 2 === 0){
        //偶数番目の処理
    } else {
        //奇数番目の処理
    }
}

for文で配列の数字をループさせています。

iに0を代入し、0に1ずつ足して、配列の数だけループします。余りが0ならば偶数の処理、それ以外なら奇数の処理の分岐です。

例えば、偶数番目の文字は赤、奇数番目の文字は青にしたい場合は以下のようにすればいいでしょう。

const length = document.querySelectorAll('li').length;
for(i = 0; i < length; i++){
    if(i % 2 === 0){
        li[i].style.color = 'red';
    } else {
        li[i].style.color = 'blue';
    }
}

配列のi番目のスタイルのcolorを変更させています。

RECOMMENDATION

NEWEST