Question

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.

Answer 1

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.