【JavaScript】奇数・偶数番目の要素を判定してcalssを付加する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで奇数・偶数番目の要素を判定してclassを付加する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

奇数・偶数を判定する

プログラミングで奇数・偶数を判定する方法の一つに剰余演算子（じょうよえんざんし）を使用した方法があります。剰余演算子は数値と数値を除算し、余った数値を返す演算子です。剰余演算子を計算に使用することで、2で除算を行った結果、あまりがあれば奇数、なければ偶数と判定することができます。

他にも奇数・偶数を判定する方法はありますが、本記事では剰余演算子を使って特定の数値が奇数であるか偶数であるかを判定し、処理に利用します。

奇数・偶数番目の要素を判定してcalssを付加する

奇数・偶数の判定方法については前項でご説明した通りです。classの付加にはclassListのadd()を使用します。付加するclassについては、奇数番目をodd、偶数番目をevenとします。

HTML

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

JavaScript

const addOddEvenClass = ()=>{

    //対象要素を取得（ここでは#listの子要素を取得）
    const listItem = document.querySelectorAll('#list li');

    //子要素の数だけ繰り返し処理
    Array.from(listItem).forEach((item, index) => {
        
        //indexは0から始まるためインクリメント
        index++;
        
        //indexの奇数・偶数を判定
        if((index % 2) === 0){
            //偶数番目の要素にclassを付加する
            item.classList.add('even');
        } else {
            //奇数番目の要素にclassを付加する
            item.classList.add('odd');
        }
    });
}
addOddEvenClass();

実行結果

<ul id="list">
    <li class="odd">1</li>
    <li class="even">2</li>
    <li class="odd">3</li>
    <li class="even">4</li>
    <li class="odd">5</li>
    <li class="even">6</li>
    <li class="odd">7</li>
    <li class="even">8</li>
    <li class="odd">9</li>
    <li class="even">10</li>
</ul>

これで奇数番目の要素にoddのclassを、偶数番目の要素にevenのclassを付加することができます。class属性の値は適宜変更してご利用ください。

最後に

奇数・偶数番目の要素にスタイルを付けたい場合はCSSのnth-childが便利です。下記で詳しい使い方をご紹介していますので、あわせてご参照いただければ幸いです！

以上、JavaScriptで奇数・偶数番目の要素を判定してcalssを付加する方法のご紹介でした！