Javascript 将元件与引导过滤器保持在一起

我正在尝试使用引导过滤器构建一个简单的FAQ页面，其中问题和答案在过滤后保持在一起

html:

我曾尝试将答案作为跨度元素包含在同一个div中，但似乎不起作用，因此我怀疑它比我想象的更复杂

示例：当我搜索“问题是那个”或“答案是那个”时，应该同时显示问题和答案

欢迎提供任何提示。

回调函数需要一个布尔返回值

您可以执行以下操作：

$（“#myInput”）。在（“键控”，函数（）上{
var value=$（this.val（）.trim（）.toLowerCase（）；//获取值trim并使其变为小写
$（“#myDIV>div”）.show（）.filter（函数（）{//选择myDIV.show all的直接子div
return！$（this）.text（）.includes（value）；//选择所有不包含文本的div
}).hide（）；//隐藏
});
#myDIV>div{
利润率：10px；
边框：1px纯黑；
}
h4{
边际：0px；
}

问题是1
答案是
问题是这个2
答案是这样的
另一个问题
答非所问

$（文档）.ready（函数（）{
$（“#myInput”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
$（“.question card”）.filter（函数（）{
$（this）.toggle（$（this）.text（）.toLowerCase（）.indexOf（value）>-1）
});
});
});

ASDF
答案是asdf
问题是QWER
安瑟特
问题ZXCV
回答zxcv
。我肯定是我做错了什么。感谢您的回复。这不是正确使用
过滤器
。我想你可以用
每个
来代替过滤器。
<input class="form-control" id="myInput" type="text" placeholder="Search..">

<div class="row" id="myDIV">
    <div class="col-sm-6">
        <h4>Question is that</h4>
        <div class="lead faq-answer">Answer is that</div>

    </div>

    <div class="col-sm-6">
        <h4>Question is this</h4>

        <div class="lead faq-answer">Answer is this</div>
    </div>
</div>

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