如果元素包含某些CSS

Question

任何元素，我有一個jQuery腳本來隱藏元素，如果它不包含某些元素：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("div.main div p").not(":has(span)").css("display","none"); 
}); 
</script> 

<div class="main"> 
    <div> 
     <p>Hello <span>OK</span></p> 
     <p>Hi</p> 
    </div> 
    <div> 
     <p>Yo</p> 
    </div> 
</div> 

這個腳本會隱藏<p>Hi</p>和<p>Yo</p>文本。

我如何檢查是否div.main下的div包含含<span>，或其他方式不<p>元素：如果一個div下的所有<p>元素被設置爲display:none ...並設置這些div到display:none。

因此，HTML輸出將是：

<div> 
    <p>Hello <span>OK</span></p> 
    <p style="display:none">Hi</p> 
</div> 
<div style="display:none"> 
    <p style="display:none">Yo</p> 
</div> 

Answer 1

我認爲你可以做到這一點更簡單地說：

$("div.main div p:not(:has(span)), div.main div:not(:has(p>span))").hide(); 

的jsfiddle演示：http://jsfiddle.net/pdBbU/1/

Answer 2

一種方式是遍歷的div並檢查它們包含跨任何p元素。像下面的內容將工作：

$("div.main div").each(function(){ 
    if($(this).find("p:has(span)").length == 0){ 
    $(this).hide(); 
    } 
});