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

Posted 2023-03-05

【中文标题】如果孩子不存在，则隐藏父容器：可见

【英文标题】：Hiding parent container if children are not :visible

【发布时间】：2011-12-14 12:02:59

【问题描述】：

我正在把头发拉出来...

我正在使用 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>

【问题讨论】：

请发布您的 HTML。似乎$(this).parent().hide(); 应该完成这项工作:)

刚刚添加了html。谢谢 Marco... 如果没有 ul.menu-items 可见，我要做的是隐藏整个 section.menu-category。

【参考方案1】：

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

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

搜索 LI 以查看它们是否可见，如果不隐藏部分。 （如果有些可见而有些不可见，则不会隐藏。）

但是当您混合隐藏/显示元素时，您可能无法获得一致的结果 :)

【讨论】：

马尔科！！这很好用。我只需要将它绑定到我输入中的 keyup 事件。它有效！非常感谢。

【参考方案2】：

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

应该做你想做的事。

【讨论】：

感谢 Bryan，但这需要绑定到 keyup 事件“input#live_search”。