jquery，過濾和隱藏元素，如何將這些「.hidden」元素排序到底

Question

當前我有一個apache檢票導航樹顯示一個根節點，有幾個孩子和一個簡單的文本輸入過濾樹項目。

過濾後，通過添加css類，不匹配的項目被隱藏。這工作得很好。

我在應用過濾器後將未隱藏的項目排序到頂端時出現問題，因此經過一個多小時的嘗試錯誤之後，我想：「讓我們再次在StaggzOverflowz上問那些善良且樂於助人的人」。

更新：我貼出了這樣的的jsfiddle：http://jsfiddle.net/polzifer/ypu9K/

的樹是這個樣子：

<input type="text" id="filter"/> 
<div class="navigation"> 
    <wicket:panel> 
    -RootNode 
    -Child with a link inside 
    -Child with a link inside 
    -Child with a link inside 
    -... 
    </wicket:panel> 
</div> 

上面那棵樹，我有一個簡單的文本輸入，在「KEYUP」被過濾樹使用javascript：

function filterList(){ 
    var count = 0; 

    /* 
    * for every link item in the navigation tree check, if they match the search entry 
    * and add the class ".hidden{ visibility: hidden;}" to it's enclosing parent 
    * element 
    */ 
    jQuery(".navigation a").each(function() { 
     if(jQuery(this).text().search(new RegExp(jQuery("#filter").val(),"i"))<0){ 
      jQuery(this).parents(".wicket-tree-content").addClass("hidden"); 
     }else{ 
      jQuery(this).parents(".wicket-tree-content").removeClass("hidden"); 
      count++; 
     } 
    }); 

    //Detach children from the navigation, sort them and append them again 
    //(we have a <wicket:panel> element around the children) 
    jQuery('.navigation').children().children().detach().sort(
     function(a,b) { 
      var condA = jQuery(a).hasClass("hidden"); 
      var condB = jQuery(b).hasClass("hidden"); 
      var result = 0; 

      if(condA == condB){ 
      result = -1; 
      } 
      if(condA != condB){ 
      result = 1; 
      } 

      return result; 
    }).appendTo(jQuery('.navigation').children()); 
} 

Answer 1

現在的訣竅是分離所有「.hidden」元素，並將它們添加到結束...

http://jsfiddle.net/polzifer/ypu9K/4/