jquery - 如何使用 JQuery 选择器在子元素存在或不存在时查找元素？

Question

这是一个示例 html 代码：

<div class="container">
   <div class="zone">
       <img class="thumb" alt="GG">
   </div>
   <div class="zone">
       <span>&nbsp;</span>
   </div>
   <div class="zone">
       <img class="thumb" alt="HH">
   </div>
</div>

我想将所有div与有或根本没有的课程相zone匹配。imgalt=GGimg

以下代码不起作用：

$('div.zone img[alt="GG"], :not(div.zone:has(img))')

Answer 1

你可以试试这个：

var $specialDivs= $('div.zone:has("img[alt="GG"]"), div.zone:not(:has(img))');
                              ^    ^                          ^        ^
                              |    |                          |        |
                       div.zone has image with alt      div.zone not having any image            

小提琴

您的选择器的问题是'div.zone img[alt="GG"]div 和 image 之间的空格将查找 div.zone ，其子项具有具有 alt 属性的图像。而图像是 的直接后代div.zone，因此您的选择器不会得到任何东西。

Answer 2

您不需要 Jquery 来执行此操作。只需使用 CSS 选择器，您就可以做到：DEMO

这是 CSS 选择器：

.container > div.zone img,
.container > div.zone img[alt="GG"] {
    background: red;
}

干杯，狮子座！

Answer 3

您可以使用该filter方法

$('div.zone').filter(function() {
   return !$(this).find('img').length || $(this).find('img[alt="GG"]').length
});

检查小提琴

Answer 4

试试这个。它确认工作，通缉区域与红色接壤。（编辑：感谢PSL）

$(document).ready(function(){
$("div.zone:has(img[alt='GG']),div.zone:not(:has(img))").css("border","1px solid red");
});