中途半端を極める

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】div要素のブロック全体をリンクにする

ブロック要素全体をリンクにすることができるjQueryです。 要素全てリンクにしたいとき、Validator errorが出る時に使用すると有効です。

【javascript】年齢認証ページの作り方 一例

エロサイトや酒の紹介ページ(販売ページ)などに使えるjQueryを紹介いたします。

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

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

【javascript】高さをjQueryで取得する時Google Chrome、Safariでうまく動作しない時の対処方

jQueryで高さ(height)を取得する時、IEやFirefoxではうまく動作するけど、Google Chrome、Safariで動作しなくて困ったことは無いでしょうか?高さを調整するようなjav …

[javascript]複数の要素の高さを揃えるjavascript利用時にうまく動作しない時の対処法

「EqualHeight」や「flatheights」など複数の要素の高さを揃えるjavascriptを使用すると、SafariとGoogle Chromeではうまく動作しない場合があります。 うまく …