jQueryを使用してDIVをランダムに表示する

たとえば、次のようなHTMLコードがある場合はjQueryを使用してDIV要素をランダムに表示することができます。

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>

簡単には、次のようなスクリプトを使用することができます。

var random = Math.floor(Math.random() * $('.item').length);
$('.item').hide().eq(random).show();
// Source: stackoverflow

>> デモ

または、ダウムガようなスクリプトも可能です。

window.onload=function() {
var E = document.getElementsByClassName("item");
var m = E.length;
var n = parseInt(Math.random()*m);
for (var i=m-1;i>=0;i--) {
var e = E[i];
e.style.display='none';
}
E[n].style.display='';
}

>> デモ

その後、上記のスクリプトと同じようにランダムに表示されます。

参考までに WordPressでコンテンツをランダムに表示したい場合 Random Contentというプラグインを使用することができます。 このプラグインを使用すると、コンテンツを追加して、グループ化してグループごとにコンテンツを表示することができます。

現在、このプラグインをした WordPress サイトでよく使用されています。 しかし、1年以上の更新がされていないですね。 現在までよく動作しますが、今後の最新 WordPressと互換性の問題が発生する可能性も排除できないようです。 同様の機能のプラグインを検索してみると、ほとんどの古いプラグインしか検索されていないですね。

もし、上記のプラグインが後日問題が発生した場合は、少し面倒な場合があるが、上記で述べたjQueryを使用してみることができるようになります。