如果div没有带类的子进程,则css隐藏div

Question

如果div没有具有特定类名的子div,是否可以用css隐藏div？

<div class="parent">
 This div must be hidden
</div>

<div class="parent">
 This div must be visible
 <div class="child">
 child div
 </div>
</div>

如果使用CSS不可能,可能使用javascript或jQuery？

Answer 1

从CSS3开始,您可以使用:empty选择器.这种方法得到了所有现代浏览器的广泛支持,并且比它的javascript替代方法快得多.

Answer 2

我不认为只用CSS就可以做到这一点,但使用Javascript肯定是可行的.

你必须
- 找到所有带有类的div parent
- 找到所有那些带有class div的孩子child
- 如果没有这样的孩子,请设置style.display = none

现在,使用纯JavaScript,这可能有点复杂.您可以使用getElementsByClassName从这个问题,然后应用上面的逻辑:

//getElementsByClassName from @CMS's answer to the linked question
var parentDivs = getElementsByClassName(document, "parent"); 
for(var i=0; i<parentDivs.length; i++)
{
    var children = getElementsByClassName(parentDivs[i], "child");
    if(!children || children.length == 0)
    {
        parentDivs[i].style.display = "none";
    }
}

使用jQuery,这更简单:

$(".parent").each(function()
{
    if($(this).children(".child").length == 0)
    {
        $(this).hide();
    }
});

实例:http://jsfiddle.net/nivas/JWa9r/