Question

我有一个看起来像这样的布局

<div class="categoery">
    <span>categorie title</span>
    <table>
        <tr class="item show">....</tr>
        <tr class="item show">....</tr>
        <tr class="item none">....</tr>
    </table>
</div>

<div class="categoery">
    <span>categorie title</span>
    <table>
        <tr class="item none">....</tr>
        <tr class="item none">....</tr>
        <tr class="item none">....</tr>
    </table>
</div>

现在我想要的是以下内容。第一个div将是类别标题，以及两行。

现在在第二个div中，我希望整个div完全隐藏。

CSS没有像div < tr.none{ display:none; }这样的父级seelctor。

我认为我可以使用的另一件事是来自jQuery的hasClass，但我想知道是否有一个纯CSS approuch。

==

也许就像将div设置为高度：0，但是带有上边距的块元素（tr）将强制div扩展？

希望这是有道理的。

Answer 1

你可以做这样的事情

$('.categoery').each(function(k,v) {
    if($(this).children('table').find("tr").css("display")=='none') {
    // alternate
  //if($(this).children('table').find("tr").hasClass("none")) {
        $(this).children('span').hide();
    }
});

我甚至创建了demo。我希望这就是所要求的。

Answer 2

$('tr.none').closest('.categoery').css('display','none');

Answer 3

目前还不清楚隐藏/显示规则是什么。以下将隐藏类别，并仅显示其中包含“show”类的TR

 $('.categories').hide().filter(':has(tr.show)').show()

可以使用css删除hide（）但是规则不是很清楚

显示DIV＆gt;仅在DIV＆gt;时SPAN表＆gt; TR是可见的

3 个答案: