Jquery Html Element Selector

Question

I have a HTML code like this,

<div class="panel-footer">
    <div class="post-activity">
        <i class="loading-icon"></i>
        <button onclick="ChangeColor(this);">Change Color</button>
    </div>
    <div class="comments-ch"></div>
</div>

When I write this Jquery code

function ChangeColor(element)
{
    $(element).closest(".panel-footer").find(".comments-ch").css("background-color","#CC0000")
}

Not working for class = comments-ch, But If I write this code like this,

    function ChangeColor(element)
    {
        $(element).closest(".panel-footer").find(".post-activity").css("background-color","#CC0000")
    }

working.

Summary, first div under the "panel-footer" is OK, but the second/last div NOT OK.

How can i reach the second/last div element? Thanks

Answer 1

Try .show() after setting the CSS:

function ChangeColor(element) {
    $(element).closest(".panel-footer").find(".comments-ch").css("background-color", "#CC0000").show()
}

Answer 2

When using a class selector, make sure you specify a period in front.

For example, in:

$(element).closest(".panel-footer").find("comments-ch").css("background-color","#CC0000")

Change from find("comments-ch") to find(".comments-ch")