如何在 jQuery 中隐藏仅包含隐藏 DIV 的元素？答案

【问题标题】：How can I hide elements which only contain hidden DIVs in jQuery?如何在 jQuery 中隐藏仅包含隐藏 DIV 的元素？
【发布时间】：2009-03-09 22:38:59
【问题描述】：

我想隐藏所有只包含隐藏 DIV 的块（除了标题）。所有元素都必须通过类名来选择。

详细地说，我希望每个“eventBlock”在下面的所有“groupBlocks”都已隐藏时不显示。隐藏所有子事件块时不应显示的“菜单”也是如此。

每个“菜单”包含多个事件块，

每个“eventBlock”包含 1 个或多个 groupBlocks。

我正在使用类并且不能使用 ID，因为有很多 groupBlocks、eventBlocks 等。

使用 JQuery 的“hide()”函数隐藏 DIV（如果相关）。

我的 HTML 基本上是这样的：

<div class="Menu">
     <strong><a name="one">Menu CAPTION</a></strong><br />
     <div class="eventBlock event1">
         <p class="underlined">eventBlock CAPTION</p>
         <div class="groupBlock group2">
             <strong>name</strong><br />
             4pm - 6pm<br />
         </div>
         <div class="groupBlock group1">
             <strong>name</strong><br />
             5pm - 7pm<br />
         </div>
     </div>
</div>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这应该可行：

var blocks = jQuery(".groupBlock");
if( blocks.size() == blocks.not(":visible").size() )
{
  blocks.parents(".eventBlock").hide();
}

如果所有 groupBlocks 都被隐藏，您可以执行类似的操作来隐藏菜单。

【讨论】：

【解决方案2】：

最简单的方法是使用单个 jQuery 选择器：

$('.eventBlock:not(:has(.groupBlock:visible))').hide();

个人觉得not()函数可读性更强，以后可以使用end()：

$('.eventBlock').not(':has(.groupBlock:visible)').hide();

现在，您还想隐藏Menus 吗？如果没有可见的 eventBlocks，似乎应该隐藏菜单，这意味着它没有可见的 groupBlocks。所以，我们可以使用和之前一样的条件：

$('.eventBlock, .Menu').not(':has(.groupBlock:visible)').hide();

【讨论】：

【解决方案3】：

$('eventBlock').each(function() {
    if ($('.groupBlock:visible', this).length)
        $(this).show();
    else
        $(this).hide();
});

可以作为插件实现

【讨论】：