jquery - 如果元素不包含具有特定 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 是否div.main不包含包含的<p>元素<span>，或者以其他方式：如果<p>div 下的所有元素都设置为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 并检查它们是否包含任何具有跨度的 p 元素。像下面这样的东西会起作用：

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

Answer 2

我认为你可以更简单地做到这一点：

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

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