Jak znaleźć elementy, gdy element potomny istnieje lub nie z selektorem JQuery? - jquery, css, selektor

Oto przykładowy kod 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>

Chcę dopasować wszystko div z zone klasa, która ma img z alt=GG albo nie img w ogóle.

Poniższy kod nie działa:

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

Odpowiedzi:

-1 dla odpowiedzi nr 1

Spróbuj tego. Potwierdza prace, poszukiwana strefa graniczy z RED. (Edytowano: Dzięki PSL)

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

---

3 dla odpowiedzi № 2

Możesz spróbować tego:

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

Skrzypce

Problem z selektorem jest taki "div.zone img[alt="GG"] spacja między div a image będzie szukać strefy div., której dzieci mają obraz z atrybutem alt. podczas gdy obraz jest bezpośrednim potomkiem div.zone, dlatego twój selektor nic ci nie da.

---

0 dla odpowiedzi № 3

Możesz użyć filter metoda

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

Sprawdź Fiddle

---

0 dla odpowiedzi nr 4

Nie potrzebujesz do tego Jquery. Po prostu za pomocą selektorów CSS możesz to zrobić: PRÓBNY

Oto selektor CSS:

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

Twoje zdrowie, Lew!

---