Javascript 如何基于其他类似命名元素的可见性状态隐藏多个元素

问题：我想根据同名元素的子元素是否显示隐藏多个元素

上下文：我在一个div中包含多个列表项，如下所示：

<div class="itemGrid">
   <ul>
      <li>
         <button class="header" id="headerCommonItems">
            "Common Items"
            ::after
         </button>
         <ul class="icons" id="iconsCommonItems">
            <li class="itemTile">Apples</li>
            <li class="itemTile">Oranges</li>
         </ul>
      </li>
      <li>
         <button class="header" id="headerUncommonItems">
            "Uncommon Items"
            ::after
         </button>
         <ul class="icons" id="iconsUncommonItems">
            <li class="itemTile">Pears</li>
            <li class="itemTile">Bananas</li>
         </ul>
      </li>
      <li>
         <button class="header" id="headerRareItems">
            "Rare Items"
            ::after
         </button>
         <ul class="icons" id="iconsRareItems">
            <li class="itemTile">Pineapples</li>
            <li class="itemTile">Guavas</li>
         </ul>
      </li>
   </ul>
</div>

我已经能够隐藏图标，但是我不知道如果图标的子元素被隐藏，如何引用相应的标题并隐藏它们

以下是我提到的其他SO页面：

---

如果我理解正确：“如果没有可见的对应图标，我想隐藏标题”

只需更改if逻辑以查找隐藏的、不可见的

===0

，然后搜索该元素的同级（

.header

不是

ul class=“icons”

）的子元素：

我还添加了删除列表图标：

$(this).parents("li").hide();

从下面的示例中可以看到，如果列表中的两个项目

“不常见项目”

都具有类：

隐藏的

，它将删除其周围的所有项目。如果一个是可见的，它不会

$.each（$（“[id^='icons']”）过滤器(
函数（）{
$（this.sides（“.header”）.show（）；
$（this.parents（“li”）.show（）；
if（$（this）.find（'li:visible'）。长度==0）{
$（this.sides（“.header”）.hide（）；
$（this.parents（“li”）.hide（）；
console.log（“隐藏的子对象”）；
返回；
}
}))
.hide（）
。隐藏{
显示：无
}



“共同项目”
：：之后

苹果
橘子



“不寻常物品”
：：之后

梨
香蕉



“珍品”
：：之后

菠萝
番石榴



是否动态添加/删除菠萝和番石榴等儿童食品？据我所知，你只是想根据搜索查询隐藏整个部分？嗨@Bren，是的，像菠萝和番石榴这样的项目是动态添加/删除的（更像是隐藏/取消隐藏）。搜索的工作原理是从所有图标“visibleItem”中删除一个类，然后将“visibleItem”类重新添加到与搜索条件匹配的图标中。您是否正在寻找同时搜索诸如“apple”之类的术语的功能，其中返回菠萝和苹果，因为它们的名称相似，并且都包含苹果？当我说添加/删除时，我指的是从DOM中实际添加和删除的元素，而不是隐藏它的CSS。嗨，不是实际的搜索。根据您的情况，现在当我搜索“苹果”时，我已经在各自的标题下得到了“苹果”和“菠萝”（苹果的常用项和菠萝的稀有项）。但我也得到了一个不常见项目的标题，下面没有项目。我想看看不常见项下是否没有项目，然后隐藏标题不常见项。我想这正是我要找的！我相信我也遇到了类似的问题。有没有办法在搜索栏中击键时重置？与现在一样，使用搜索词“apple”，不常见的标题会消失，但即使搜索栏被清除，这些标题也会消失。@BryanTran我编辑了文章和代码段，这应该可以解决这个问题。但是你说的是我看不到的搜索栏和击键，如果你调用这个函数，这个修复程序应该可以做到。@BryanTran如果没有，请用生成/编辑问题，这样我就可以看到发生了什么。你的编辑修复了它。非常感谢你的帮助！
$(this).siblings(".header").hide();

$(this).parents("li").hide();