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

Works for me jsfiddle.net/j08691/wwxw2wok. Have you checked the browser's console for errors? — j08691
– j08691, Commented Aug 31, 2014 at 19:00
It should definitely be working. Perhaps something is wrong with the HTML structure? clas= or some other typo? — iabw
– iabw, Commented Aug 31, 2014 at 19:04
Does the <div class="comments-ch"></div> have any contents or styles to give it dimensions? Being empty, it can be 0px tall, allowing the script to succeed but the effects may just not be easily seen. — Jonathan Lonowski
– Jonathan Lonowski, Commented Aug 31, 2014 at 19:05
If it's display:none, you'll need to .show() it after setting the css. or slideDown, or fadeIn or whatever. — iabw
– iabw, Commented Aug 31, 2014 at 19:08

Syed Ali Taqi · Accepted Answer · 2014-08-31 19:19:18Z

1

Try .show() after setting the CSS:

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

answered Aug 31, 2014 at 19:19

Syed Ali Taqi

4,9943 gold badges36 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Control Freak · Accepted Answer · 2014-08-31 18:58:40Z

1

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")

answered Aug 31, 2014 at 18:58

Control Freak

13.2k31 gold badges101 silver badges150 bronze badges

Collectives™ on Stack Overflow

Jquery Html Element Selector

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related