たまたま要素をランダムに表示する用事があったので、今日はJavaScriptでランダム表示をする方法にしたいと思います。
WordPress内で試せるようにしようと思ったのですが、pに入ってしまうのでコードのみ。
仕様変えるのはちょっと面倒だったので・・・。
<script type=”text/javascript”>
$(function(){
var randomContent = [];
/*「randomContent」という空の配列を作ります*/
$(‘.randomDiv a’).each(function() {
/*「randomDiv」の中のaタグに対して以下の処理を行います*/
randomContent.push($(this).html());
/*上の配列の中に今あるaタグの中身を1つづつ格納します*/
});
randomContent.sort(function() {
/*「randomContent」を引数の結果に基づき並べ替えます*/
return Math.random() – Math.random();
/*「random」と命令し乱数を発生させます。上記と合わせるとバラバラの並びにします*/
});
$(‘.randomDiv a’).empty();
/*randomDivの中のaタグを一度すべて空にします*/
i = 0;
/*インクリメントするため、iは0であると定義します*/
$(‘.randomDiv a’).each(function() {
/*randomDivの中のaに対して一個づつ処理を加えます*/
$(this).append(randomContent[i]);
/*randomContentの中身を１つ表示させます。引数は最初は0です*/
i++;
/*引数を1つ増やしてもう一度処理します。配列を使い切るまで続けます*/
});
});
</script>
次に、HTMLコードの方ですが、
これはrandomDivというクラス名の中にaタグが入っていれば、それらはランダムに表示されます。
スマートフォンだとaタグの中にdivタグが入っている事が多いですね。
