按字母順序排列的jquery

Question

她是我的html和jQuery。 我希望能夠按類名按字母排序，當我按下過濾器div中的「排序」按鈕時。 現在我可以通過「綠色」隱藏所有其他人，所有其他人都會隱藏。但是，我需要排序他們的能力。

<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找到的代碼。

如果您要擴展此列表以便按列表排序或者升序和降序，您可能只需要一個變量來跟蹤列表當前處於什麼順序，否則檢查列表當前是否處於升序，然後降序排序，反之亦然。