[eluser]yorvik[/eluser]
Hello guys
I have this jquery code, where I sort my <ul> list with the first letter of the <li class>
Code:
$(document).ready(function(){
var ulOptions = '<ul id="options"> <li><a href="#" class="all">All</a></li> \n\
<li><a href="#" class="A">A</a></li> \n\
<li><a href="#" class="B">B</a></li> \n\
<li><a href="#" class="C">C</a></li> \n\
<li><a href="#" class="D">D</a></li> \n\
<li><a href="#" class="E">E</a></li> \n\
<li><a href="#" class="F">F</a></li> \n\
<li><a href="#" class="G">G</a></li> \n\
<li><a href="#" class="H">H</a></li> \n\
<li><a href="#" class="I">I</a></li> \n\
<li><a href="#" class="J">J</a></li> \n\
<li><a href="#" class="K">K</a></li> \n\
<li><a href="#" class="L">L</a></li> \n\
<li><a href="#" class="M">M</a></li> \n\
<li><a href="#" class="N">N</a></li> \n\
<li><a href="#" class="O">O</a></li> \n\
<li><a href="#" class="P">P</a></li> \n\
<li><a href="#" class="Q">Q</a></li> \n\
<li><a href="#" class="R">R</a></li> \n\
<li><a href="#" class="S">S</a></li> \n\
<li><a href="#" class="T">T</a></li> \n\
<li><a href="#" class="U">U</a></li> \n\
<li><a href="#" class="V">V</a></li> \n\
<li><a href="#" class="W">W</a></li> \n\
<li><a href="#" class="X">X</a></li> \n\
<li><a href="#" class="Y">Y</a></li> \n\
<li><a href="#" class="Z">Z</a></li></ul>';
var $links = $('ul#links');
$('div#lijst').html(ulOptions)
.children('li')
.addClass('all')
.filter('li:odd')
.addClass('odd');
$('#options li a').click(function() {
var $this = $(this),
type = $this.attr('class');
$links.children('li')
.removeClass('odd')
.hide()
.filter('.' + type)
.show()
.filter(':odd')
.addClass('odd');
return false;
});
});
Everything works fine, but my show all option isn't working. When I click it my original list is not showing up again.
Is there somebody who sees the problem, thanks in advance.
Joachim Vanthuyne