複数レベルのリストをフィルタする

Question

深く入れ子にされたリスト（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>を得ることができたが、私はそれが目に見える子供たちをだ維持する方法を見つけ出すことはできません彼に何かがある場合は開いてください。

注：私がここに掲載したコードを再利用する必要はありません。可能であれば、より良い、より柔軟な実装を投稿することができます。

Answer 1

$(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>

Answer 2

[OK]を:)だけあなたはおそらく、あなたの正規表現の一致を見つけたら、要素をチェックを停止したい

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

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

     }