Jquery, filter and hide 요소, howto는이 ".hidden"요소를 아래쪽에 정렬합니다.

Question

현재 나무 항목을 필터링하기위한 몇 가지 하위 항목과 간단한 텍스트 입력과 함께 하나의 루트 노드를 보여주는 apache wicket 탐색 트리가 있습니다.

필터링 할 때 일치하지 않는 항목은 CSS 클래스를 추가하여 숨겨집니다. 이것은 꽤 잘 작동합니다.

필터를 적용한 후에 숨겨진 항목을 정렬하는 데 문제가 있으므로 1 시간 이상 시도한 후 오류가 발생했다는 생각이 들었습니다. "StaggzOverflowz에서 다시 그 친절하고 기꺼운 사람들에게 물어 봅시다."

업데이트 : http://jsfiddle.net/polzifer/ypu9K/

나무는 다음과 같습니다 : 나는 어떤 "의 keyup"에 간단한 텍스트 입력이, 그 나무 위

<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> 

트리를 필터링되어 나는 이것에 대한 jsfiddle을 게시 자바 스크립트로 : 지금 비결은 ...

,369 요소 ".hidden"모두 분리하고 마지막에 그들을 추가 할

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

했다

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