Question

我想隐藏整个div.group或H2标签只有当前div.group中的所有元素class.element都被隐藏。

感谢。

<div class="group_container">
    <div class="group">
        <h2>Group1</h2>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
    <div class="group">
        <h2>Group2</h2>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
    <div class="group">
        <h2>Group3</h2>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
</div>

Answer 1

您可以使用以下方式对其进行过滤：

$('.group').filter(function(){
    return !$(this).children('.element:visible').length;
}).hide();

或者使用jQuery选择器：

$('.group:not(:has(.element:visible))').hide();

优化为：

$('.group').filter(':not(:has(.element:visible))').hide();

Answer 2

这样做：

$('.group').filter(function(){
    return $(this).find('.element:visible').length == 0;
}).hide();

例如，点击子项，当点击最后一个时，该组也会消失。

https://jsfiddle.net/c4vxhe2a/

如果隐藏了所有子项，请隐藏组

2 个答案: