Jquery,过滤和隐藏元素,如何排序这些"元素到底

Jquery, filter and hide elements, howto sort these ".hidden" elements to bottom

本文关键字:元素 quot 隐藏 过滤 何排序 Jquery 排序      更新时间:2023-09-26

目前我有一个apache wicket导航树,显示一个根节点,有几个子节点和一个简单的文本输入,用于过滤树项。

过滤后,不匹配的项通过添加css类隐藏。这很有效。

在使用过滤器后,我对未隐藏的项目进行排序有问题,所以在尝试了一个多小时之后,我想:"让我们再问问那些在格斯格zoverflowz上的善良和愿意的人吧。"

更新:我为此发布了一个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());
}

现在的诀窍是分离所有的"。隐藏的"元素,并将它们附加到…

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