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

こんにちは、ryohei(@ityryohei)です!

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

JavaScriptで奇数・偶数番目の要素にclassを付けたいんだけど、良い方法ないかな?

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

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

奇数・偶数を判定する

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

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

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

奇数・偶数の判定方法については前項でご説明した通りです。classの付加にはclassListadd()を使用します。付加する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を付加する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら