фильтр по алфавиту jQuery

Question

Ее мой html и jQuery. Я хочу, чтобы сортировать их по алфавиту по имени класса, когда я нажимаю кнопку «Сортировать» в окне фильтра. Прямо сейчас я могу скрыть всех остальных «зелеными», все остальные скроются. Но мне нужна их сортировка.

<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(); 
}); 

Answer 1

Этот список сортируется в порядке возрастания:

<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) { 
    return ($(b).text()) < ($(a).text()); 
} 

JSFiddle

Полное раскрытие: я использовал код найденный в this question.

Если вы хотите продлить это, чтобы иметь сортировку списка в качестве альтернативы, по возрастанию и убыванию, вам, вероятно, просто потребуется переменная для отслеживания того, в каком порядке находится список, в противном случае проверка, чтобы увидеть, по возрастанию, затем сортируйте по убыванию, и наоборот.