Question

IE7 shows my empty divs, so
I want to create a function that hides the div if it doesn’t have a ul element in it.
I have several divs to which this selector applies: 'div.Home_filter_par div[class*="cq-colctrl-lt"] div.filters ul'
I need to check every div separately. So this won’t work:

function update () {
     if (('div.Home_filter_par div[class*="cq-colctrl-lt"] div.filters ul') == 0) {
         $('div.Home_filter_par div[class*="cq-colctrl-lt"] div.filters li').closest('div.parsys_column').hide();
     }
}

I also tried this way, but this hides even the divs that contain both empty div.filters and div.filters with ul elements in them

$('div.Home_filter_par div[class*="cq-colctrl-lt"] 
div.filters:empty').closest('div.parsys_column').hide();

Answer 1

You can select elements in your DOM based on whether or not they have other specific elements inside them using :has().

So you’d probably be looking for something like this:

$('div.parsys_column:not(:has(div[class*="cq-colctrl-lt"] div.filters ul))').hide();

Although I’d question how you’re using [class*=""]. Are you sure it’s not something you can select with .cq-colctrl-lt instead?

Now, nested :not() and :has() selectors (or any nested selectors in general) make your code harder to read, so you might want to consider splitting that like this:

$('div.parsys_column')
    .not(':has(div[class*="cq-colctrl-lt"] div.filters ul)')
    .hide()
    ;