这是我的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元素上运行,上面的代码正在运行,但我无法在每个列表下隐藏卡片。我该怎么办?
我想你是在跟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)
});
});
我认为这应该可以解决你的问题。