中途半端を極める

web関連で役に立ちそうなものを紹介いたします

javascript

jQueryを使ってボックス要素をランダムに表示する方法

投稿日:

一部の要素をランダムに表示させたいという要望があったので、調べてみたところ、よさそうなjavascriptがあったので紹介いたします。結構手軽だったので活用できるシーンは多いのではないでしょうか。

Javascript

jQuery(function($) {

$.fn.extend({
	randomdisplay : function(num) {
		return this.each(function() {
			var chn = $(this).children().hide().length;
			for(var i = 0; i < num && i < chn; i++) {
				var r = parseInt(Math.random() * (chn - i)) + i;
				$(this).children().eq(r).show().prependTo($(this));
			}
		});
	}
});

$(function(){
	$("[randomdisplay]").each(function() {
		$(this).randomdisplay($(this).attr("randomdisplay"));
	});
});

});

外部jsとして、保存し、ランダム表示させたい要素を含んだファイルに外部jsを紐付けます。
ここではrandomdisplay.jsとして保存します。

HTML

<ul randomdisplay="3">
<li><a href="#1">要素1</a></li>
<li><a href="#2">要素2</a></li>
<li><a href="#3">要素3</a></li>
<li><a href="#4">要素4</a></li>
<li><a href="#5">要素5</a></li>
</ul>

ランダム表示をしたい要素の親要素に対して「randomdisplay=”nn”」という表記を追加します。nnはランダム表示させたい要素数です。例の場合ならば、5個のリスト要素のうち、3個をランダムで表示するという設定になります。

参考サイト:
jQueryプラグインの簡単な書き方と、ランダム表示プラグインの例
http://murak.net/post/javascript/300

-javascript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

【javascript】レスポンシブデザインにも使用できる!マウスオーバーするとメインの画像が切り替わるjQuery「ImageNavigation」

今回はマウスオーバするとメインの画像が切り替わるjavascriptを紹介いたします。 FLASHなどではこのような動きをするものはあるのですが、jQueryではなかなかありそうでない動きですので、重 …

レスポンシブサイトにPC用とスマホ用の切り替えボタンをつける方法を紹介

最近レスポンシブサイトが増えてきました。スマートフォン用のサイトにはPC用を表示するボタンがついていますが、その機能を実装する方法を紹介いたします。javascriptを使用いたします。

Google Maps API V2であまりソースを変更せずV3へ移行する方法

注: Google Maps JavaScript API バージョン 2(V2)は、2010 年 5 月 19 日に正式にサポートが終了しました。V2 の廃止スケジュールは 2013 年 5 月 1 …

[javascript]レスポンシブデザインのWEBに使用できる!現在のウィンドウサイズの取得と判定をして処理を変更する方法

レスポンシブ対応のときウィンドウ幅でjavascriptの動きを変更したいと思ったことはないでしょうか。今回jQueryを用いてウィンドウ幅に合わせて処理を変更する方法を見つけましたので紹介いたします …

【Javascript】でphpのincludeやrequireのような動作をJavascriptで実現する方法

サブカラムやフッターなど他のページで使いまわすような要素はincludeやrequire、SSIなどで外部ファイルを読み込んで対応している人は多いかと思われます。実際そっちの方が更新も楽ですし、ケアレ …