Фильтр списка и его потомков в jquery

Question

Это мой HTML-код:

<input class="form-control" id="myInput" type="text" placeholder="Search..">
<ul class="list-group" id="myList" data-role="listview" data-divider-theme="a" data-inset="true">
    <li data-role="list-divider" role="heading" class="list-group-item">
         <h1>b - B</h1>
    </li>
    <li data-role="collapsible" data-inset="false">
         <h3>backbiting</h3>
             <div class="card">
                 <div class="card-body text-left">
                      <div class="card-text"><p>Loreum Ipsum</p></div>
                 </div>
             </div>
    </li>

Это jquery, который я использую:

$("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList h3").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
});

Я хочу, чтобы поиск / фильтр работал на элементе li> h3 и вышекод работает, но я не могу скрыть карточки под каждым списком.Как мне это сделать?

Answer 1

Я думаю, что у вас возникли проблемы с сокрытием ли также вместе с h3.Здесь вы должны выбрать только #myList h3, поэтому только этот сегмент будет скрыт в фильтре.Чтобы скрыть li вместе с этим, вы должны выбрать оба элемента, т.е. родителя этого элемента.Таким образом, вместо select #myList h3 выберите #myList li и в фильтре используйте $ (this) .find ('h3'). Text () для фильтра, как показано ниже ...

$("#myInput").keyup(function() {
        var value = $(this).val().toLowerCase();
        $("#myList li").filter(function() {
            $(this).toggle($(this).find('h3').text().toLowerCase().indexOf(value) > -1)
        });
    });

Я думаю этодолжен решить вашу проблему.