javascript - 如果子容器不是 :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 以查看它们是否可见，如果不是隐藏的部分。(如果有些可见而有些不可见，则不会隐藏。)

但是当你混合隐藏/显示元素时，你可能不会得到一致的结果:)