Javascript Jquery通过内部元素切换列表元素'；s文本

我找不出为什么我的过滤函数不适用于切换

li

元素

---

JavaScript:

---

HTML:

---

我可以看到所有

span

元素根据搜索值切换，但我想隐藏与搜索值不匹配的

li

元素。我遗漏了一些东西，但是什么呢？

你的过滤代码实际上是正确的！因此，无需更改任何JavaScript

---

那么问题是什么？ 您的

li

元素都具有bootstrap4类

d-flex

。这是一个问题，因为在筛选列表时，它将给出与CSS

display:none不匹配的元素。但是，由于
d-flex
是
的一个组件，因此无法应用此功能！重要信息
值。这意味着每当您的代码试图将
li
设置为
display:none
，它将被
display:flex>覆盖！重要的
d-flex添加的属性


那么我该如何解决这个问题呢？
从所有
li
元素中删除
d-flex
类，并将它们设置为
display:flex与一些自定义CSS

.list-group-item {
  display: flex;
}


例子：
请参阅上的固定版本。
Do
$（this）.parent（）.toggle（…）而不是
$（this）.toggle（…）谢谢您的关注。这样做之后，现在，函数只检查最后一个列表项。如果它匹配，它不会隐藏整个
留在那里的其他元素。如果我搜索其他
元素，它会隐藏整个列表。我猜你们误解了我的“但我当然只想整体隐藏列表元素”“word。我正在将我给出的示例与span进行比较。我并不是要隐藏整个列表，只是要隐藏不匹配的列表。我现在正在编辑这个问题。你是真正的mvp。非常感谢。没问题，很高兴我能帮忙！：）
<ul name="menulist" id="menulist" class="list-group grid-container">
    <li class="list-group-item d-flex flex-row justify-content-center align-items-center">
        <span>Yeni ürün ekle</span>
        <div class="btn-group btn-group-sm ml-auto" role="group">

            <a class="btn btn-success" href="/restaurant/additem">
                <i class="fas fa-plus"></i>
            </a>

        </div>
    </li>
    <li name="bira" class="list-group-item d-flex flex-row justify-content-center align-items-center">
        <span>bira</span>
        <div class="btn-group btn-group-sm ml-auto" role="group">
            <a href="/restaurant/edititem/-10" class="btn btn-success"><span class="fas fa-edit"></span></a>
            <a href="/restaurant/delete/-10" class="btn btn-danger"><span class="fas fa-trash-alt"></span></a>
        </div>
    </li>
    <li name="patates kızartması" class="list-group-item d-flex flex-row justify-content-center align-items-center">
        <span>patates kızartması</span>
        <div class="btn-group btn-group-sm ml-auto" role="group">
            <a href="/restaurant/edititem/-11" class="btn btn-success"><span class="fas fa-edit"></span></a>
            <a href="/restaurant/delete/-11" class="btn btn-danger"><span class="fas fa-trash-alt"></span></a>
        </div>
    </li>
</ul>

$("#menulist span").filter(...)

.list-group-item {
  display: flex;
}