ボタンを押すと特定のクラスを持った要素だけ選んでソートしてくれるjQuery

備忘録的にメモ。

商品を並べたときにボタンひとつで特定のジャンルだけ選んで表示したり、お手軽にソートできないかなと思うときがある。今回はそんなときのためのシンプルなjQueryを書いた。

コンテンツ一覧から特定のカテゴリだけ選ぶ、なんてときにも役に立つかも。

今回は、idがKeyYellowのボタンをクリックしたら、yellowというclassが振ってある要素だけが表示されるというものにした。

デモサイトも作ったので参考にしてください。

Class Sorting Demo

htmlは下記の通り。

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Class Sorting Demo</title>
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
	<ul id="sort">
		<li id="KeyYellow">Yellow</li>
		<li id="KeyRed">Red</li>
		<li id="KeyBlue">Blue</li>
		<li id="KeyAll">All</li>
	</ul>
	<div id="container">
		<div class="yellow all">sample</div>
		<div class="blue all">sample</div>
		<div class="red all">sample</div>
	</div>
</div>

script.jsはこんな感じで書いた。

$(function(){
	$('#sort li').each(function(){
		$(this).click(function(){
			var idname = $(this).attr("id").substring(3).toLowerCase();
			var classname = '.';
			classname += idname;
			$('#container div:not(classname)').css('display','none');
			$(classname).fadeIn(200);
		});
	});
});

6行目で押したボタンについてるidを取得して加工をしてclass名を作る。
7行目のdiv:not(classname)のところで選択するclass以外の要素は非表示にしてる。
あとは選択されたclassの要素だけフェードインさせて出来上がり。

全部選択するときにallというクラスを全部ふらなきゃいけないとか、もっとスマートな書き方があると思うけどとりあえずこんな感じで作りました。