How to add css class using jQuery?

Question

1.00/5 (1 vote)

See more:

I have written this script to find control and then add css class to it

var abc = $(this).parent().parent().parent().attr('id');

It works fine. When I test variable in alert like

alert(abc);

then it display correct id of the control. Now I want to add css class to this control. I tried this code but not working.

$('#abc').addClass('abc')

Posted 15-Oct-12 3:52am

Dinesh Ambaliya

Add a Solution

Comments

bbirajdar 15-Oct-12 9:55am

What does it mean by not working?

Sergey Alexandrovich Kryukov 15-Oct-12 15:13pm

You already added the class correctly. You should also have this class in CSS.
--SA

2 solutions

Solution 2

Make sure that the 'abc' that you add in the .addClass method is a valid css class that is available to the page. If it is, then it will work. If you don't see all the overrides that the class tries to apply, then you may have other css issues, but as long as your $('#abc') is valid then the .addClass('[validcssclassname]') will work.

Posted 15-Oct-12 4:04am

fjdiewornncalwe

Comments

Sergey Alexandrovich Kryukov 15-Oct-12 15:14pm

Correct, a 5. In other words, .addClass is correct.
I suspect OP has a big misconception, as if var abc had anything to do with CSS, but it doesn't.
--SA

TheCoolCoder 16-Oct-12 2:31am

his problem was indeed what you both thought $('#abc') he was using wasnt valid..

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

TheCoolCoder · Accepted Answer · 2012-10-15T17:39:00

Solution 3

This might seem silly but I am afraid you seem to be missing out on $('#'+abc) part.

$('#'+abc).addClass('abc')

Ignore if its not the issue :-).

Posted 15-Oct-12 17:39pm

TheCoolCoder

Updated 15-Oct-12 17:42pm

v3

Comments

Dinesh Ambaliya 16-Oct-12 1:40am

Thanks! But still I have problem. When I add css class it not work
$('#'+abc).addClass('abc'); css class name is correct I have created it.
but when I add css attribute it works
<pre>$('#' + abc).css('background', '#4A699C');</pre>

TheCoolCoder 16-Oct-12 2:11am

I have seen some cases involving background images where the browser wouldnt load the images specified in css class initially unless some element in the page already uses the class.So when we change css class of element via script the browser wont be able to load that image all of a sudden. so try adding a dummy element of same type(as $(this).parent().parent().parent()) with css class 'abc' to page and keep it hidden. Suppose if the element to which you are adding class 'abc' is a div try keeping a dummy div <div id='divDummy' class='abc' style='display:none;'> </div> in your page, it could help. Let me know if this works.