Skip to content Skip to sidebar Skip to footer

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.

Post a Comment for "Loop Through Parent Elements And If Child Element Doesnt Exist Display Text"