Скрытие родительского контейнера, если потомков нет: visible

Question

Я тяну свои волосы на этом ...

Я использую фильтр живого поиска jquery.Который работает отлично.И позволяет мне этот код присоединять и изменять события.

// live search for items
$('input#live_search').quicksearch('li.menu-item', {
      'delay': 300,
      'loader': 'span.loading',
      'bind': 'keyup click',
      'show': function () {
        $(this).show();
      },
      'hide': function () {
        $(this).hide();
      },
      'prepareQuery': function (val) {
        return new RegExp(val, "i");
      },
      'testQuery': function (query, txt, _row) {
        return query.test(txt);
      }
});

Фильтруемые элементы списка являются частью своего собственного неупорядоченного списка и собственного раздела.То, что я хочу сказать, на Keyup.Если все элементы списка в этом конкретном неупорядоченном списке скрыты.Спрячьте весь родительский контейнер ...

Я так близко подобрался.Но всегда есть загвоздка.

У кого-нибудь есть идеи?

Заранее спасибо.

HTML выглядит так:

<section id="calzone" class="menu-category">
<header class="category-header cf">text in here</header>
<ul class="menu-items">
    <li class="menu-item even" style="display: list-item; ">
        text in here
    </li>
    <li class="menu-item odd" style="display: none; ">
        text in here
    </li>

    <li class="menu-item even" style="display: none; ">
        text in here
     </li>

    <li class="menu-item odd" style="display: none; ">
        text in here
     </li>
</ul>
</section>
<section id="appetizer" class="menu-category">
<header class="category-header cf">text in here</header>
<ul class="menu-items">
    <li class="menu-item even" style="display: none;">
        text in here
    </li>
    <li class="menu-item odd" style="display: none; ">
        text in here
    </li>

    <li class="menu-item even" style="display: none; ">
        text in here
     </li>

    <li class="menu-item odd" style="display: none; ">
        text in here
     </li>
  </ul>
</section>

Answer 1

$('section').each( function() {
  var hiddenLI = $(this).children('ul').children('li').is(':visible');

    if(!(hiddenLI)) {
      $(this).hide();
    }
});

Ищет LI, чтобы увидеть, если они видны, если не скрыть раздел. (Не будет скрыто, если некоторые видны, а некоторые нет.)

Но если вы получили смешанные скрытые / показанные элементы, вы можете не получить последовательный результат:)

Answer 2

if(!$("parent").children().is(':visible')) {
  $("parent").hide();
}

Должен делать то, что вы хотите.