Here is a sample html code:
<div class="container">
<div class="zone">
<img class="thumb" alt="GG">
</div>
<div class="zone">
<span> </span>
</div>
<div class="zone">
<img class="thumb" alt="HH">
</div>
</div>
I want to match all div with the zone class that have img with alt=GG or no img at all.
The following code doesn't work:
$('div.zone img[alt="GG"], :not(div.zone:has(img))')
You can try this:
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
issue with your selector is that 'div.zone img[alt="GG"] a space between div and image will look for the div.zone whose children having the image with alt attribute. whereas the image is direct descendant of div.zone, hence your selector will not get you anything.
You can use the filter method
$('div.zone').filter(function() {
return !$(this).find('img').length || $(this).find('img[alt="GG"]').length
});
You don't need Jquery for do this. Just with CSS selectors you can do it: DEMO
Here is the CSS selector:
.container > div.zone img,
.container > div.zone img[alt="GG"] {
background: red;
}
Cheers, Leo!
Try this. It confirm works, the wanted zone are bordered RED. (Edited: Thanks PSL)
$(document).ready(function(){
$("div.zone:has(img[alt='GG']),div.zone:not(:has(img))").css("border","1px solid red");
});
