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);
      }
});

被过滤的列表项是它们自己的无序列表和自己的部分的一部分。我想说的是关键字。如果隐藏了该特定无序列表中的所有列表项。隐藏整个父容器......

我已经接近了很多方面。但似乎总是有一个障碍。

有没有人有任何想法？

提前致谢。

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();
}

应该做你想做的事。

如果孩子不是，则隐藏父容器：可见

2 个答案: