jquery中的过滤器列表及其子项

Posted 2023-05-09

技术标签:

【中文标题】jquery中的过滤器列表及其子项【英文标题】：Filter list and its children in jquery 【发布时间】：2019-07-12 04:35:26 【问题描述】：

这是我的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 元素起作用，并且上面的代码正在运行，但我无法在每个列表下隐藏卡片。我该怎么做？

【问题讨论】：

【参考方案1】：

我认为你在隐藏 li 和 h3 时遇到了问题。在这里，您只选择了#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)
        );
    );

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

【讨论】：

如果我这样做，那么过滤器在上工作，我只想过滤包含在