html - filter alphabetical jquery -

html - filter alphabetical jquery -

her html , jquery. want ability sort them alphabetic class name when press "sort" "button" in filter div. right can hide others "green" others hide. but need ability sort them.

<div id='filters'> <a href='#' id ="sort">sort</a> <a href='#' id='blue'>blue</a> <a href='#' id='green'>green</a> <a href='#' id='yellow'>yellow</a> </div <div id="box"> <ul id="filter"> <li class="green"></li> <li class="blue"></li> <li class="yellow"></li> <li class="blue"></li> <li class="yellow"></li> </ul> </div> $('#filters a').click(function(e){ e.preventdefault(); var filter = $(this).attr('id'); $('#box ul li').show(); $('#box ul li:not(.' + filter + ')').hide(); });

this sorts list in ascending order:

<div id='filters'> <a href='#' id ="sort">sort</a> <a href='#' id='blue'>blue</a> <a href='#' id='green'>green</a> <a href='#' id='yellow'>yellow</a> </div> <div id="box"> <ul id="filter"> <li class="green">green</li> <li class="blue">blue</li> <li class="yellow">yellow</li> <li class="blue">blue</li> <li class="yellow">yellow</li> </ul> </div> $('#filters a').click(function(e){ e.preventdefault(); var filter = $(this).attr('id'); if (filter == "sort") { $('#box ul li').sort(asc_sort).appendto('#filter'); } else { $('#box ul li').show(); $('#box ul li:not(.' + filter + ')').hide(); } }); function asc_sort(a, b) { homecoming ($(b).text()) < ($(a).text()); }

jsfiddle

full disclosure: used code found in this question.

if extend have list sort alternatively ascending , descending, you'd need either variable track order list in, otherwise check see if list in ascending order, sort descending, , vice versa.

jquery html