css隱藏div如果div沒有類的孩子

如果div沒有具有特定類名的子div，可以用css隱藏div嗎？css隱藏div如果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？

來源

2011-08-04 FLY

不，小孩div也會被隱藏。你爲什麼想做這個？ – Drewid

我不認爲你可以單獨在CSS中做到這一點。但是，你可以用JavaScript來做到這一點。 – Shef

尋找像 '如果（.parent AND .parent有.child）隱藏this.parent（而不是其他父母），如果這使得它更清楚你Drewid。最好在css中完成，如果.parent已經或沒有孩子，如果這可以讓你在任何地方，甚至可以添加一個類名？ – FLY

我不認爲這是可能的只有CSS，但它絕對有可能使用Javascript。

你必須
- 找到parent類的所有div
- 找到所有那些帶班孩子的div child
- 如果沒有這樣的孩子，設置style.display = none

現在，純javascript這可能有點複雜。您可以從this question使用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/

來源

2011-08-04 11:29:35 Nivas

thnx。我已經做了一些更多的研究，並試圖以另一種方式做到這一點（通過隱藏所有父項目，然後只顯示有孩子的父母），但我必須得出結論，您不能使用CSS選擇器來選擇父項目。你只能選擇元素本身或死者。 – FLY

由於CSS3，你可以使用：空選擇器。這種方法得到了所有現代瀏覽器的廣泛支持，並且比JavaScript的選擇速度快得多。

來源

2014-09-09 12:36:49 Bosken85

但是'：empty'失敗，如果'.parent'裏面是任何文本（包括空格或換行符）。 –

css隱藏div如果div沒有類的孩子

回答

相關問題