如果元素包含某些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(); 
    } 
});