Ako nájsť prvky, ak existuje podradený prvok alebo nie s selektorom JQuery? - jquery, css, selektor

Tu je ukážka html kódu:

<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>

Chcem sa zhodovať so všetkými div s zone triedy, ktoré majú img s alt=GG alebo nie img vôbec.

Nasledujúci kód nefunguje:

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

odpovede:

-1 pre odpoveď č. 1

Skúste to. Potvrdzuje sa, že hľadaná zóna je ohraničená ČERVENOU farbou. (Upravené: Vďaka PSL)

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

---

3 pre odpoveď č. 2

Môžete to vyskúšať:

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

husle

problém s výberom je ten "div.zone img[alt="GG"] medzera medzi div a obrázkom bude hľadať div.zónu, ktorej deti majú obrázok s atribútom alt. zatiaľ čo obraz je priamym potomkom div.zone, takže váš selektor vám nič nezíska.

---

0 pre odpoveď č. 3

Môžete použiť filter metóda

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

Začiarknite políčko Fiddle

---

0 pre odpoveď č. 4

Nepotrebujete na to Jquery. Len pomocou selektorov CSS to môžete urobiť: DEMO

Tu je selektor CSS:

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

Na zdravie, Lev!

---