如何使用jQuery更改父元素的背景颜色？

Question

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

Answer 1

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

Answer 2

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