CodeIgniter Forums
Jquery remove Class - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Jquery remove Class (/showthread.php?tid=39398)



Jquery remove Class - El Forum - 03-09-2011

[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