Question

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

详细地说，我希望当下面的所有“groupBlocks”都已隐藏时，不会显示每个“eventBlock”。与“菜单”相同，当隐藏所有子事件块时，不应显示该菜单。

每个“菜单”包含多个eventBlocks，

每个“eventBlock”包含一个或多个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>

Answer 1

这应该有效：

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

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

Answer 2

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

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

就个人而言，我发现not()函数更具可读性，我可以稍后使用end()：

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

现在，你想要隐藏Menu吗？如果Menu没有可见的eventBlocks，那么它似乎应该被隐藏，这意味着它没有可见的groupBlocks。因此，我们可以使用与以前相同的条件：

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

Answer 3

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

可以作为插件实现

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

3 个答案: