中途半端を極める

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で表示する

今回は西暦を自動的に更新されるようにできるjavascriptをメモしておきます。 ・現在の西暦を自動的に取得する方法。 ・最終更新日の西暦を取得する方法。 2パターンあります。 コピーライトの部分と …

【Javascript】IE6でもpng画像を使えるようにする

IE6でpng画像を使うと、透明部分が灰色になって正常に表示されません。 IE6でも正常に表示させるためには「DD_belatedPNG」というライブラリを利用します。 img要素やCSSでの背景(背 …

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

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

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

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

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

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