Как скрыть несколько элементов на основе состояния видимости других элементов с одинаковыми именами

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>

У меня есть функция поиска, которая показывает / скрывает значки на основе критериев поиска (например, если бы я искал термин «общий», он бы отображал только значки для Яблоки и апельсины, но все остальные значки скрыть).

Я хочу скрыть заголовки, если соответствующие значки не отображаются. Итак, используя предыдущий пример, я хочу, чтобы заголовок «Общие элементы» отображался только в том случае, если я ищу термин «Общие» и скрываю заголовки «Необычные элементы» и «Редкие элементы». На данный момент он все еще будет показывать другие заголовки, хотя под ними нет значков.

Я пробовал ссылаться на несколько страниц SO, но это мой первый раз, когда я работаю с JQuery, и я не могу кажется, заставить его работать. Вот вариант того, что я пробовал до сих пор.

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

Мне удалось скрыть значки, но я не знаю, как ссылаться на соответствующие заголовки и скрывать их, если дочерние элементы значков скрыты.

Вот другие страницы SO, на которые я ссылался:

Проверить, все ли дочерние элементы скрыты

Как скрыть родителя, если дети скрыты?

Answer 1

Если я вас правильно понял: «Я хочу скрыть заголовки, если соответствующие значки не видны»;

Просто измените свой if logi c, чтобы найти скрытые, невидимые === 0 , а затем найдите эти элементы (.header не является дочерним элементом ul class="icons"):

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

Я также добавил, чтобы удалить значок списка:

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

Как вы Как видно из примера ниже, если оба элемента в списке "Uncommon Items" имеют class: 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();