Фильтровать многоуровневый список

У меня есть глубоко вложенный список (10 уровней), и я хочу фильтровать этот список, чтобы получить <li>, который я искал, и если у этого <li> есть дети, я хочу показать их как ну, вот пример кода ...Фильтровать многоуровневый список

$(document).ready(function() { 
 
    $("#filter").keyup(function() { 
 
     var filter = $(this).val(); 
 
     
 
     $("li").each(function() { 
 
      if (filter == "") { 
 
       $(this).css("visibility", "visible"); 
 
       $(this).fadeIn(); 
 
      } else if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
 
       $(this).css("visibility", "hidden"); 
 
       $(this).fadeOut(); 
 
      } else { 
 
       $(this).css("visibility", "visible"); 
 
       $(this).fadeIn(); 
 
      } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="filter" type="text" /> 
 
<ul> 
 
    <li>Tom</li> 
 
    <li> <a>Peter</a> 
 

 
     <ul> 
 
      <li> <a>John</a> 
 
       <ul> 
 
        <li> <a>Doe</a> 
 

 
         <ul> 
 
          <li> <a>Shia</a> 
 

 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li><a>Nicolas</a> 
 

 
      </li> 
 
      <li><a>Reem</a> 
 

 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li><a>Danial</a> 
 
     <ul> 
 
      <li> <a>Adam</a> 
 

 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

в приведенном выше примере, мне удалось получить <li> я искал, но я не могу понять, как сохранить это дети видимые и открыть, если у него есть.

Примечание: вам не нужно повторно использовать код, который я разместил здесь, вы можете опубликовать лучшую, более гибкую реализацию, если сможете.

источник

2017-01-15 Ruby

Вы, вероятно, хотите, чтобы остановить проверку элементов, как только вы найдете матч RegExp. Готов поспорить, вы можете переписать свою функцию так, как хотите, используя 'nextUntil': https://api.jquery.com/nextUntil/ – jmargolisvt

Можете ли вы показать мне рабочий пример? – Ruby

$(document).ready(function() { 
 
    
 
    
 
    $("#filter").keyup(function() { 
 
     var filter = $(this).val(); 
 
     
 
     $("li").each(function() { 
 
      if (filter == "") { 
 
       $(this).css("visibility", "visible"); 
 
       $(this).fadeIn(); 
 
      } else if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
 
       $(this).css("visibility", "hidden"); 
 
       $(this).fadeOut(); 
 
      } else { 
 
       $(this).css("visibility", "visible"); 
 
       $(this).fadeIn(); 
 
      } 
 
     }); 
 
    }); 
 
    
 
    $('.hasSub').click(function() { 
 
    $(this).parent().toggleClass('subactivated'); 
 
\t \t $(this).parent().children('ul:first').toggle(); 
 
    
 
    if($(this).find('i').hasClass('glyphicon-folder-open')){ 
 
     $(this).find('i').removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close'); 
 
    }else{ 
 
     $(this).find('i').removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open'); 
 
    } 
 
\t }); 
 
    
 
});

.fordtreeview ul{ 
 
    display:none; 
 
    margin: 15px -16px; 
 
    list-style:none; 
 
} 
 

 
.fordtreeview ul.expanded{ 
 
    display:block; 
 
} 
 

 
.fordtreeview ul li{ 
 
    left:5px; 
 
    margin-right:10px; 
 
    color: #333; 
 
} 
 

 
.fordtreeview > li:first-child{ 
 
    display:block !important; 
 
} 
 

 
.fordtreeview li, 
 
.fordtreeview a{ 
 
    color: #333; 
 
    text-decoration:none; 
 
    cursor:pointer; 
 
} 
 

 
.fordtreeview i.glyphicon{ 
 
    margin-right:5px; 
 
} 
 

 
.subactivated, 
 
.fordtreeview > li:not(:first-child):hover{ 
 
    background-color: #f5f5f5; 
 
}

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="filter" type="text" /> 
 
<ul class="fordtreeview list-group col-md-2" > 
 
    
 
    <li class="list-group-item"> <span class="hasSub"><i class="glyphicon glyphicon-folder-close"></i> Peter </span> 
 

 
     <ul class="list-group "> 
 
      <li class="list-group-item" > <a>John</a> </li> 
 
      <li class="list-group-item" ><a>Nicolas</a></li> 
 
      
 
     </ul> 
 
    </li> 
 
    <li class="list-group-item"><span class="hasSub"><i class="glyphicon glyphicon-folder-close"></i> Danial</span> 
 
     <ul class="list-group " > 
 
      <li class="list-group-item"> <a>Adam</a></li> 
 
     </ul> 
 
    </li> 
 
    
 
</ul>

источник

2017-09-28 22:40:54

Это в значительной степени то, что у меня уже есть, но не то, что я хочу. Я хочу, чтобы, если бы я искал «Петра», а «Питер» имел детей, я хочу иметь возможность расширить «Петра» и его детей. – Ruby

Ok :) только добавить

  else if ($(this).text().search(new RegExp(filter, "i")) < 0) { 

      if(!$(this).parent().parent().is('li')){ 
       $(this).css("visibility", "hidden"); 
       $(this).fadeOut(); 
      } 

     }

источник

2017-10-19 19:12:59

Фильтровать многоуровневый список

ответ

Смежные вопросы