如何选择包含img的最外层标签作为直接子级

Question

I have following markup

 var divs = $('div:has(img)').not(':parent:has(>img)'); divs.css('border','1px solid red'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div><!-- get this div --> 1 <img alt='#' /> <div> 2 <img alt='#' /> <div> 3 <img alt='#' /> <div> 4 <img alt='#' /> </div> </div> </div> </div> <div><!-- get this div --> 5 <img alt='#' /> <div> 6 <img alt='#' /> </div> <div> 7 <img alt='#' /> </div> </div> <div> <div><!-- get this div --> 8 <img alt='#' /> </div> </div> 

From this I need to select the outermost div which contains img tag, that I don't want to select div if it's parent contains img tag as direct child. I have tried var divs = $('div:has(img)').not(':parent:has(>img)'); but it only works when it's have a parent.

Answer 1

Your main problem is the fact that :parent selector does not do what you think it does. CSS rules never go upwards. So if you need to go upwards, you need to do this using JavaScript (using the function .parent() , which does not have an equivalent in CSS selectors, not even jQuery extended ones).

var divs = $('div:has(>img)').filter(function(i, n) { return !($(n).parent().children('img').length); });
divs.css('color','red');

However, this will paint everything red, because of the first C in CSS ("cascading"): the declaration of colour red on 1, 5 and 8 will paint all text inside those divs red.