Sort Items Alphabetically Using jQuery

Sort!

by Amir Sharifian

HTML

<h1>Sort by:</h1>
<select name="link-sort-list" class="link-sort-list">
<option data-sort="asc">Asc</option>
<option data-sort="desc">Desc</option>
</select>   

<ul id="sort-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</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').on("change",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();
            console.log($('option:selected', $sort).data("sort"));
            if($('option:selected', $sort).data("sort")==="asc"){
                return (keyA > keyB) ? 1 : 0;
            } else {
                return (keyA < keyB) ? 1 : 0;
            }
        });
        $.each($listLi, function(index, row){
            $list.append(row);
        });
        e.preventDefault();
    });
});