Question

我有以下HTML

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

我首先隐藏所有这些li，然后尝试显示与选择器匹配的li。这是我的JavaScript。这里filterData是链接的id。

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();
    }  }

最后两行不起作用...... 任何人都可以告诉我可能的原因。实际上我试图用:has, :contains, find().filter()展示李，但如果我有大树，所有这些都花费了太多时间。

我是否尝试使用多个选择器来显示它，但它没有显示任何内容。任何具有更快显示方式的替代方案都将受到高度赞赏。

Answer 1

你有什么（除了@verrerby提到的语法错误）应该工作，但为什么不减少那些代码？

你可以通过在.join()之后的第一个元素之后的每个元素上添加#来减少事情，这也极大地简化了逻辑。您可以将其降低到：

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

另请注意删除.find()的更改，在浏览器中支持使用单个选择器的速度更快，而在所有其他选择器中速度更快。

我看到您的代码无效的唯一其他可能的原因是jQuery用于隐藏，$用于节目，是否可能{{ 1}}指的是其他什么？（例如，ptototype？）要测试.show()来电，只需将$替换为$。

Answer 2

你在最后一个语句中有一个额外的+'，你可以用多个语句而不是一个语句来做（#{id}选择器非常快）：

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

}else{  

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

多个选择器似乎不起作用

2 个答案: