按字母顺序排列的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找到的代码。

如果您要扩展此列表以便按列表排序或者升序和降序，您可能只需要一个变量来跟踪列表当前处于什么顺序，否则检查列表当前是否处于升序，然后降序排序，反之亦然。