Sort Items Alphabetically Using jQuery

Sort!

by Weylin

HTML

<h1>Sort by:</h1>
<a href="#" class="buttons link-sort-list asc"><i class="icon-asc"></i>Asc</a>
<a href="#" class="buttons link-sort-list desc"><i class="icon-desc"></i>Desc</a>
    
<ul id="sort-list">
<li>укекуе</li>
<li>кегк</li>
<li>уцкецк</li>
<li>проорот</li>
<li>авф</li>
</ul>

<div id="footer">
    <p>Unless otherwise noted, this content is licensed under a <a href="http://creativecommons.org/licenses/by/3.0" target="_new">Creative Commons Attribution 3.0 License</a>.<br />Visit <a href="http://jenniferperrin.com/blog" target="_new">www.jenniferperrin.com</a> for more <a href="http://jenniferperrin.com/blog/snippets/">Snippets</a> and <a href="http://jenniferperrin.com/blog/category/tutorial/">Tutorials</a>.</p>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);

body { margin: 4px 40px; font-family:'Dosis'; font-size: 18px; }
h1 {
    display: block;
    margin: 0 0 6px 0;
    font-size: 26px;
    color: rgba(138,152,182,1);
    text-decoration: none;
}
    h1:hover { color: rgba(138,152,182,0.7); }
a { font-size: 18px; color: rgba(138,152,182,1); text-decoration: none; }
    a:hover { text-decoration: none; }

ul { list-style: none; margin-top: 20px; }

/* -- Buttons -- */
.buttons {
    background-image: -moz-linear-gradient(33% 0 -90deg, #FAFAFA 0%, #E1E1E1 99%, #E1E1E1 100%);
    border: 1px solid #AAAAAA;
    border-radius: 4px 4px 4px 4px;
    color: #594C3F;
    font-family: 'Dosis',sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 3px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 50px;
}
i {
    border-right: 1px solid rgba(170, 170, 170, 0.5);
    box-shadow: 1px 0 0 #FFFFFF;
    font-size: 115%;
    height: 90%;
    margin-right: 8px;
    padding-right: 8px;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
a [class^="icon-"], a [class*=" icon-"] {
    display: inline-block;
    text-decoration: inherit;
}
.buttons [class^="icon-"], .buttons [class*=" icon-"] {
    line-height: 0.9em;
}
.icon-asc:before { content: "↟"; }
.icon-desc:before { content: "↡"; }

/* -- FOOTER -- */
#footer { margin-top: 40px; clear:both; }
    #footer p {
        text-align: center;
        font-size: 16px;
    }
    #footer a, #footer a:visited {
        color: rgba(138,152,182,1);
        text-decoration: none;
        font-weight: bold;        
        outline: none;
    }
        #footer a:hover { color: rgba(138,152,182,0.8); text-decoration: none; }

JavaScript

$(document).ready(function() {
    $('.link-sort-list').click(function(e) {
        var $sort = this;
        var $list = $('#sort-list');
        var $listLi = $('li',$list);
        $listLi.sort(function(a, b){
            var keyA = $(a).text();
            var keyB = $(b).text();
            if($($sort).hasClass('asc')){
                return (keyA > keyB) ? 1 : 0;
            } else {
                return (keyA < keyB) ? 1 : 0;
            }
        });
        $.each($listLi, function(index, row){
            $list.append(row);
        });
        e.preventDefault();
    });
});