NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

ページを開く度に要素をランダムに並び替える

2015年5月13日jQueryのみでつくるギミック

ページを開く度に要素をランダムに並び替える

ページを開く度に指定した要素をランダムに並び替えます。

デモページ

JavaScript

(function($){
	$(function() {

		var rBox = [];
		$('.elements').each(function() {
			rBox.push($(this).html());
		});
		rBox.sort(function() {
			return Math.random() - Math.random();
		});
		$('.elements').empty();	
		
		i = 0;
		$('.elements').each(function() {
			$(this).append(rBox[i]);
			i++;
		});

	});
})(jQuery);

HTML

<div id="container">
	<div class="elements">1</div>
	<div class="elements">2</div>
	<div class="elements">3</div>
	<div class="elements">4</div>
	<div class="elements">5</div>
	<div class="elements">6</div>
	<div class="elements">7</div>
	<div class="elements">8</div>
	<div class="elements">9</div>
	<div class="elements">10</div>
	<div class="elements">11</div>
	<div class="elements">12</div>
</div>

CSS

#container {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
}
.elements {
	display: inline-block;
	width: 100px;
	padding: 40px 0;
	margin: 0 10px 25px;
	background-color: #ff5b6b;
	color: #ffffff;
	text-align: center;
	font-size: 20px;
}

参考サイト

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. ページを開く度に要素をランダムに並び替える

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com