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类匹配，img与alt=GG或img匹配。

以下代码不起作用：

$('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

<强> Fiddle

你的选择器的问题是'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
});

<强> Check Fiddle

Answer 4

试试这个。它确认工作，想要的区域是RED边界。（编辑：感谢PSL）

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

如何使用JQuery选择器在子元素存在与否时查找元素？

4 个答案: