CODEWITHSUNDEEP
javascriptjqueryclickparentparent-child
Peter Stuart
Peter Stuart

Reputation: 2434

How do I change the background colour of parent element using jQuery?

What I am trying to do is change the background colour of a parent element when a submit button is clicked.

So for I have have tried this code:

            $("input.submit").click(function(){
                var className = $(this).parent().attr("class");
                $(className).animate({backgroundColor: '#FFB95E'}, 1000);
                $(className).animate({borderColor: '#C97200'}, 1000);
            });

But I can never get the class name of the parent element. There are a few submit buttons all with different parent elements, that is why I need to do it this way.

Could anyone please help?

Many Thanks

Peter

Upvotes: 0

Views: 2093

Answers (2)

DeMeNteD
DeMeNteD

Reputation: 385

An example of your markup would help with this problem but you seem to be using the right code to get the parent element.

I would suggest you use a debugger like firebug to see what $(this).parent()[0] is or just alert($(this).parent()[0]); if it does not return "object" you know that you don't have a parent element if you do have a parent element use alert($(this).parent()[0].outerHTML); to see how if you have the right element.

Lastly $(className) is redundant and serves no purpose just chain the elemnt commands with the getter like below or use the variable straight it is already a jQuery object.

$(this).parent().animate({backgroundColor: '#FFB95E'}, 1000).animate({borderColor: '#C97200'}, 1000);

Upvotes: 1

Rune FS
Rune FS

Reputation: 21742

Why not simply 

$(this).parent()
       .animate({backgroundColor: '#FFB95E',
                 borderColor: '#C97200'}, 1000);

you don't need to get the class of the parent to set the background color. however if I'm not mistaken animate on colors does not work by default you'll need some plugin to handle the transitions

Upvotes: 0

Related Questions