Loop Through Parent Elements And If Child Element Doesnt Exist Display Text

I'm trying to figure out how to loop through all parent classes (.grid) and if it doesnt have a child div with class (.image-container) then display (.content-container) within the

Solution 1:

Something like this should work:

$('.grid').each(function() {
    if($(this).find('.image-container').length == 0) {
        // no children
        $(this).find('.content-container').show();
    }
});

Solution 2:

An alternative, one call:

$('.grid')
    .filter(functionfi(){return !$('.image-container', this).length})
    .children('.content-container')
    .show();

http://jsfiddle.net/E8CfL/

Or:

$('.grid')
    .filter(':not(:has(.image-container))')
    .children('.content-container')
    .show();

http://jsfiddle.net/E8CfL/1

Or:

$('.grid:not(:has(.image-container)) .content-container').show();

http://jsfiddle.net/E8CfL/3

Not sure which would be the most efficient, but I have a hunch the first would be.