javascript - 要素にランダム クラスを適用する

Question

重複の可能性：
指定されたすべての要素にランダムなクラスを適用します

ページ上のすべての 'a' 要素を取得し、クラス '.pink'、'.blue'、または '.yellow' を javascript を使用してすべての a 要素にランダムに適用することは可能ですか? ページにさまざまな色のリンクを配置したいが、均等にランダム化したい. これを行う方法がわからないため、提供するスクリプトはありません。

Answer 1

タグに記載されているように jQuery を使用する場合、これが可能な解決策です。

// when document is loaded
$(document).ready(function () {

    // set classes
    var classes     = new Array ('pink', 'blue', 'green');

    // calculate length once, as this will never change
    var length      = classes.length;

    // select all a-tags
    var links       = $('a');

    // loop through all a-tags and apply color randomly
    $.each( links, function(key, value) {
        // get random value/class-name from array and add it using the addClass function
        $(value).addClass( classes[ Math.floor ( Math.random() * length ) ] );
    });

});

コメントは、それが何をするのかを明確にする必要があります。

それを試してみてください

Answer 2

クラスを配列に入れてから、「A」タグをループして、それぞれにランダムインデックス（Math.random（）を使用）を割り当てることができます。

var colorClasses = ['pink', 'blue', 'yellow'];
$("a").each(function(e){
    classIndex = Math.floor(Math.random() * colorClasses.length);
    $(this).addClass(colorClasses[classIndex]);
});​

ライブデモ： http： //jsfiddle.net/ALngA/2/

Answer 3

Math.random()0 から 1 の間のランダムな浮動小数点数を返します。これを配列インデックスに変換するには、配列のサイズを掛けてMath.floorから切り捨てます。

var arr = ['red','green','blue'];
var idx = Math.floor(Math.random() * arr.length);

alert(arr[idx]);

数学.ランダム()

Answer 4

var colors = ['pink', 'blue', 'yellow']
$('a').each(function () {
  var rand = ~~(Math.random() * colors.length)
  $(this).addClass(colors[rand])
})