Change CSS using "if" in jQuery

Question

Is there a way to change the CSS of a parent div only if the child is visible? And back again when not??? I've been racking my brains and I'm all Googled and jQuery documentationed out.

Answer 1

$(".childClass").each(function(){
    if($(this).is(":visible"))
    {
        $(this).parent().css("some_attribute", "some_value");
    }
    else
    {
        $(this).parent().css("some_attribute", "default_value");
    }
});

You can also use addClass/RemoveClass on the parent, but be careful if you remove a class that you're using as part of the selector to find the child element.

Answer 2

if(($('#childId').css('display')!="none")&&($('#childId').css('visibility')!="hidden"){
  $('#childId').parent().css('property',value);
}

Answer 3

This may not be quite as efficient as Chris Doggett's, but it's shorter... thought I'd throw it out there so you'd have the option:

$("childClass:visible").parent().css("some_attribute", "some_value");
$("childClass:hidden").parent().css("some_attribute", "default_value");

Answer 4

$(".childClass").each(function(){
    var $this = $(this);

    $this.is(":visible") ? $this.parent().css("some_attribute", "some_value")
                         : $this.parent().css("some_attribute", "some_value")
});