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

Question

问题：我想根据是否显示类似名称元素的子元素来隐藏多个元素。

上下文：我在一个 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>

我有一个搜索功能，可以根据搜索条件显示/隐藏图标（例如，如果我搜索术语“common”，它只会显示 Apples 和 Oranges 的图标，但隐藏所有其他图标）。

如果没有可见的相应图标，我想隐藏标题。因此，使用前面的示例，我只希望“Common Items”标题显示我是否正在搜索术语“Common”并隐藏“Uncommon Items”和“Rare Items”标题。目前，即使下面没有图标，它仍然会显示其他标题。

我尝试引用多个 SO 页面，但这是我第一次使用 JQuery，我似乎无法让它工作。这是我迄今为止尝试过的一种变体。

$.each($("[id ^= 'icons']").filter(
    function()
    {
        if ($(this).find('li:visible').length !== 0)
        {
            console.log("Visible children.");
            return;
        }
    }))
.hide();

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

这是我一直参考的其他 SO 页面：

Check if all children elements are hidden

How to hide parent if children are hidden?

Answer 1

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

只需更改您的 if 逻辑以查找隐藏的、不可见的 === 0，然后搜索该元素兄弟（.header 不是 ul class="icons" 的子元素）：

$(this).siblings(".header").hide();

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

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

从下面的示例中可以看出，如果列表 "Uncommon Items" 中的两个项目都有类：hidden，它将删除它周围的所有项目。如果一个可见，它不会。

$.each($("[id ^= 'icons']").filter(
    function() {
    
      $(this).siblings(".header").show();
      $(this).parents("li").show();
      
      if ($(this).find('li:visible').length === 0) {
        $(this).siblings(".header").hide();
        $(this).parents("li").hide();
        console.log("Hidden children.");
        return;
      }
    }))
  .hide();

.hidden {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 hidden">Pears</li>
        <li class="itemTile hidden">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>

编辑：

根据要求将其添加到您的 if 语句之外，它将始终首先显示/重置所有内容，然后在 if 语句中进行新的过滤。

  $(this).siblings(".header").show();
  $(this).parents("li").show();