在jquery中过滤列表及其子项

问题描述 投票:0回答:1

这是我的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元素上运行,上面的代码正在运行,但我无法在每个列表下隐藏卡片。我该怎么办?

enter image description here

javascript jquery jquery-mobile bootstrap-4
1个回答
1
投票

我想你是在跟h3一起隐藏li时遇到的问题。在这里,您只选择#myList h3,因此只有该段才会隐藏在过滤器上。要隐藏li,你必须选择两个元素,即该元素的父元素。因此,而不是选择#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)
        });
    });

我认为这应该可以解决你的问题。

© www.soinside.com 2019 - 2024. All rights reserved.