[jQuery] Zmiana widoku listy za pomocą jQuery

<section id="filter" class="span12">
	<ul>
		<li class="span1">
			<span class="btn btn-warning" id="filter-list"><i class="icon-th-list"></i></span>
		</li>
		<li class="span1">
			<span class="btn btn-danger" id="filter-thumb"><i class="icon-th"></i></span>
		</li>
	</ul>
</section>
<section class="span12" id="items">
	<ul class="normal-list">
		<li >
			<figure>
				<img src="img/img.jpg" alt=""/>
				<figcaption>
					<h3>Tekst</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</figcaption>
			</figure>
		</li>
		<li >
			<figure>
				<img src="img/img.jpg" alt=""/>
				<figcaption>
					<h3>Tekst</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</figcaption>
			</figure>
		</li>
		<li >
			<figure>
				<img src="img/img.jpg" alt=""/>
				<figcaption>
					<h3>Tekst</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</figcaption>
			</figure>
		</li>
		....
	</ul>
</section>

ul 				{ list-style: none; }
figure				{ margin: 1.875%; }
h1				{ text-align: center; }
#page				{ margin: auto; }
#filter	ul			{ float: right; }
.normal-list li 		{
	clear: both;
	padding: 0.9375%;
	width: 100%;
}
.normal-list img 		{ 
	float: left;
	width: 10%;
	margin: 0.9375% 0.9375% 0 0;
}
.normal-list figcaption { 
	float: left;
	width: 89%;
}
.thumb-list li {
	width: 22%;
	margin-right: 0.9375%;
	float: left;
	position: relative;
	display: inline-block;
	cursor: pointer;
}
.thumb-list li h3 	{ text-align: center; }
.thumb-list li p 	{
	/* ukrywamy paragraf z tekstem w widoku miniaturek */
	display: none;
	visibility: hidden;
}
.thumb-list li:hover p {
	/* tutaj wyświetlamy paragraf po najechaniu kursora myszki na element listy */
	display: block;
	visibility: visible;
	position: absolute;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background: #cfcfcf;
	width: 100%;
	right: -110%;
	top: 5px;
	z-index: 3;
	padding: 4%;
	-webkit-box-shadow: 0px 0px 4px 0px #333;
	box-shadow: 0px 0px 4px 0px #333;
}

$(function () {
 
	function pde(e) {
	    if (e.preventDefault) {
	    	e.preventDefault();
	    } else {
	    	e.returnValue = false;
	    }
	}
 
	$('#filter-list').on('click', function (e) {
		pde(e);
		var items = $('ul','#items');
		if (!items.hasClass('normal-list')) {
			items.removeClass('thumb-list').addClass('normal-list');
		}
 
		var figure = items.find('figure');
		figure.each(function (k,v) {
			if ($(this).hasClass('thumbnail')) {
				$(this).removeClass('thumbnail');
			}
		});
	});
 
	$('#filter-thumb').on('click', function (e) {
		pde(e);
		var items = $('ul','#items');
		if (!items.hasClass('thumb-list')) {
			items.removeClass('normal-list').addClass('thumb-list');
		}
 
		$(items).find('figure').each(function (k) {
			$(this).addClass('thumbnail');
		});
	});
});