【JavaScript】複数存在する要素を取得してランダムにクラスを付与する方法

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

本記事では、JavaScriptで複数存在する要素を取得して、それらにランダムにクラスを付与する方法をご紹介しています。

実現したいこと

本記事では下記のような処理を実現することをゴールとしています。「RunPen」と表示されているボタンをクリックして動きをご確認ください。

See the Pen
Add Random Class| JavaScript by ryohei (@intotheprogram)
on CodePen.

いかがでしょうか。

画像が順番に、ランダムに表示されるのがご確認いただけるかと思います。

上記のデモは、指定した要素を取得後、要素の数と同じ範囲内で乱数を生成し、生成した乱数を使用してn番目にある要素に「is-play」というクラスを付与することで実現しています。簡単に実装することができますので、同様の処理を検討している方の参考になれば幸いです。

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

HTML／CSSとJSの下準備をする

まずは要素を用意します。デモでは表示をわかりやすくするためにリストに画像を持たせていますが、これと同じものにする必要はありません。それぞれ実装したいものをご使用いただければと思います。

HTML

<ul>
    <li><img src="https://i.picsum.photos/id/1011/200/300.jpg" alt=""></li>
    <li><img src="https://i.picsum.photos/id/1012/200/300.jpg" alt=""></li>
    <li><img src="https://i.picsum.photos/id/1013/200/300.jpg" alt=""></li>
    <li><img src="https://i.picsum.photos/id/1014/200/300.jpg" alt=""></li>
    <li><img src="https://i.picsum.photos/id/1015/200/300.jpg" alt=""></li>
    <li><img src="https://i.picsum.photos/id/1016/200/300.jpg" alt=""></li>
    <li><img src="https://i.picsum.photos/id/1018/200/300.jpg" alt=""></li>
    <li><img src="https://i.picsum.photos/id/102/200/300.jpg" alt=""></li>
</ul>

続いてスタイルを定義していきます。定義するといってもリストのアイテムを横並びにして、ランダムに付与する「is-play」というクラスに透明度の変化をつけている程度になります。

CSS

ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

ul li {
    width: 25%;
    opacity: 0;
    transition: .7s;
}

.is-play {
    opacity: 1;
}

CSS3が公開されてから、スクリプトに頼らなくても豊富な種類のアニメーションが実現できるようになりました。下記の記事でもいくつかご紹介ていますので、参考にしていただければと思います。

少し話が逸れてしまいましたが、最後にスクリプトを書いて下準備は完了です。それぞれの役割についてはコメントをご参照ください。

JS

const shuffle = {
    num: 10,
    ary: [],

    //配列生成
    create: function(){
        for(var i = 0; this.ary.push(i) < this.num; i++);
    },
    //シャッフル
    shuffle: function(num){
        
        //引数があればnumを更新
        if(num > 0){
            this.num = num;
        }

        this.create();

        //フィッシャー–イェーツのシャッフルアルゴリズム
        for(i = this.ary.length - 1; i > 0; i--){
            j = Math.floor(Math.random()*(i + 1));
            rand = this.ary[i];
            this.ary[i] = this.ary[j];
            this.ary[j] = rand;
        }
        return this.ary;
    },
}

では、上記で作成したHTML／CSSとスクリプトを使って、実際にランダムにクラスを付与する処理を実装していきましょう。

スクリプトの使い方

前項でご紹介したスクリプトの下に下記を追記します。

//要素指定
var el = document.getElementsByTagName("li");

//要素の長さ（数）を取得
var len = el.length;

//配列生成（要素の数に応じて生成された乱数を値に持たせる）
var ary = shuffle.shuffle(len);

//インデックス初期化
var index = 0;

//一定の時間間隔で乱数番目にある要素にクラスを付与する
window.setInterval(function(){
    el[ary[index]].classList.add('is-play');
    index++;
}, 500);

上記を追記するとデモと同じ処理を実装することができます。要素を指定する部分と、「setInterval」内のクラス名はそれぞれご自身の環境に応じてご変更ください。