Jquery: как скрыть / показать элементы дерева на основе критериев поиска? - PullRequest
Новая
       0

Jquery: как скрыть / показать элементы дерева на основе критериев поиска?

2 голосов
/ 11 сентября 2010

У меня есть древовидное представление, основанное на тегах

  • .

    Я пытаюсь скрыть ветви на основе текста фильтра.Вот мой код показа / скрытия: 

    $("#filter").change(function(){
       var tval=$(this).val();
       $("li").show();
       $("li").not(":contains(\'"+tval+"\')").hide();
       $("li").is(":contains(\'"+tval+"\')").show();

       })

    Команда: $ ("li"). Is (": includes (\ '" + tval + "\')"). Show ();показывает ветви, отфильтрованные по заданному tval, но если у данного

  • есть дополнительные дочерние элементы, я бы тоже хотел их показать.Как я могу показать все дочерние элементы, если они существуют?

    С уважением, Арман.

    РЕДАКТИРОВАТЬ

    пример: поиск текста A и у нас D => A => C, D => C => C, A => K => S, поэтому после фильтрации мое дерево должно быть: D => A => C, A => K => S.В текущей реализации это будет выглядеть как D => A, A

Ответы [ 3 ]

3 голосов
/ 11 сентября 2010

Вы можете немного упростить свой подход следующим образом: 

$("#filter").change(function(){
   var tval=$(this).val();
   $("li").hide().filter(":contains('"+tval+"')").find('li').andSelf().show();
});

Это скрывает все <li> элементов, а затем показывает, содержат ли они непосредственно значение (или являются родительскими, которыесодержит его) ... и для тех, кто также показывает все потомки <li> элементов, показывая все дочерние элементы , мы надеемся, , как вы хотите.

0 голосов
/ 11 сентября 2010

Попробуйте это 

$("#filter").change(function(){
       var tval=$(this).val();
       $("li").hide();
       if(tval != ""){             
         $("li").each(function() { 
           if($(this).is(":contains(\'"+tval+"\')")){ 
             $(this).show().find('li').show();
           }
         });
       }
       else {
         $("li").show();
       }
})

Так что спрячьте их всех, затем найдите совпадения и затем для каждого сопоставленного li покажите его и всех дочерних элементов li

РЕДАКТИРОВАТЬ: снова отредактировано, извините, я полностьюв прошлый раз пропустил

0 голосов
/ 11 сентября 2010

Если я правильно понимаю, дочерний селектор - это то, что вам нужно.

...