中途半端を極める

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]複数の要素の高さを揃えるjavascript利用時にうまく動作しない時の対処法

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

【javascript】jQueryとprototypeを共存させる方法

自分が管理していないサイトを突然「更新してくれ!」と言われ、確認するとprototypeが使用されておりました。私は基本的にJavaScriptライブラリはjQueryを使用するので、少々戸惑いました …

[javascript]exvalidation.jsが動作しない時必見!代わりとなるjavascriptを紹介

jqueryのバージョンによってはexvalidation.jsが動作しない場合があります。 ※特に新しいバージョンのjqueryを使用しているときに動作しなくなった方が多いのではないでしょうか? 動 …

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

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

【javascript】thickboxを組み込んでもポップアップせず、動作がしないときの対処法

thickboxを組み込んでもポップアップせず、動作がしないときの対処法 wordpressでPicasa and Google Plus Expressというプラグインを使用していて、画像をポップア …