multiple selectors not seems to work

I have following HTML

<div id="finalTree">  
<ul>  
 <li class="last" style="display: list-item;">  
 <a id="DataSheets" href="#">Data Sheets</a> 
</li></u>...........</div>

and I am first hiding all these li and then trying to show those li which match to selector. Here is my JavaScript. Here filterData is id of links.

function filterLeftNavTree(filterData){
    jQuery("ul.treeview").find("li").hide();
    var selectors =[];
    if(filterData.indexOf("|")!=-1){
        var filterData = filterData.split("|");
        for(i=0;i<filterData.length;i++){
            selectors.push('#'+filterData[i]);
        }  
        开发者_如何学编程var filtered = selectors.join(',');
        $(filtered ).show();

    }else{  

        $('#'+filterData+).show();
    }  }  

the last two line doesn't works... any one can tell me what can be possible reason. Actually I tried to show li with :has, :contains, find().filter() but all these are taking too much time if I have large tree.

Do I am trying to show it by using multiple selector, but it's not showing any thing. Any alternative having faster way to show it will be highly appreciated.

What you have (aside from the syntax error @verrerby mentioned) should be working, but why not cut down on that code a bit?

You can slim things down by adding the # on every element after the first as part of the .join(), this also greatly simplifies the logic. You can reduce it down to:

function filterLeftNavTree(filterData) {
  $("ul.treeview li").hide();
  $('#'+filterData.split('|').join(',#')).show();
}

Also note the change removing .find(), it's faster in browser that support it to use a single selector, and just as fast in all the others.

The only other possible reason I see for your code not working is jQuery is used for the hide and $ is used on the show, is it possible $ refers to something else? (e.g. ptototype?) To test just replace $ with jQuery on the .show() call.

You have an extra +' in the last statement, and you could do it in multiple statements instead of one (the #{id} selector is very fast):

if(filterData.indexOf("|")!=-1){
    var filterData = filterData.split("|");
    for(i=0;i<filterData.length;i++){
        $('#'+filterData[i]).show();
    }  

}else{  

    $('#'+filterData).show();
}