: не работает должным образом

Question

Я использую $ (': has'), чтобы отфильтровать дерево .. он работает нормально, но требуется слишком много времени, чтобы узнать точное соответствие ... вот мой код

function filterLeftNavTree(filterData){ 
    jQuery("ul.treeview").find("li").hide(); 
    if(filterData.indexOf("|")!=-1){ 
    var Data = filterData.split("|"); 
    for(i=0;i<Data.length;i++){ 
    $(':has(#'+Data[i] +')').show(); 
    } 
    }else{ 
    $(':has(#'+filterData+')').show(); 
    } } 

, когда я использую $('div:has(#'+Data +')').show(); для повышения скорости ... то не показывает точное совпадение ...
я делаю что-то неправильно ...?
я также попытался с .find() ..но не смог получить искомое решение ...

любое предложение, так что я могу улучшить производительность этого кода. Спасибо заранее.

Answer 1

Попробуйте это: 1) Удалены проверка на ненужным filterData прежде, чем разделить
2) Старинная строку filterData на селектор JQuery, чтобы избежать цикла. 3) Добавлено содержит селектор, вместо того, имеет

function filterLeftNavTree(filterData){ 
    jQuery("ul.treeview").find("li").hide(); 
    var Data = filterData.replace("|", "), :contains("); 
    $(':contains('+ Data +')').show(); 
} 

Answer 2

Короткий ответ не использовать :has; есть несколько других, более быстрых способов сделать то же самое.

При выборе элементов из DOM либо ID или класса CSS, $('#' + filterData) или $('.' + filterData), соответственно, будет делать только, что без каких накладных расходов более обобщенного селектора, таких как :has.

Чтобы решить вашу проблему, полезно отметить, что несколько селекторов можно передать в $(), разделив их запятыми.

Например:

var selectors = []; 
for(i=0;i<Data.length;i++){ 
    selectors.push('#'+Data); 
} 
var filtered = $(selectors.join(','));