Question

How do I apply a style to the parent of an element if it has a specific property? Here’s the example I’m working with…

<div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>
<div>
    <div class="inner active"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>
<div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>

…I want to apply a background color to the out div when its child element with an ‘inner’ class also contains the ‘active’ class. Here’s the jQuery solution I hacked together, which doesn’t seem to be working…

if ($("div.inner").hasClass("active")) {
    $(this).parent().css("background", "yellow");
};

Does anyone have a fix, or better approach, in mind? Thanks.

Also, optionally, how do I get it to apply the style based on specific text within the ‘inner’ div as opposed to a specific class being applied to it? Thanks again.

Answer 1

$("div.inner.active").parent().css("background", "yellow");

jsFiddle: http://jsfiddle.net/g4gBx/1/