0

I want to replace the old class of html element with the new one using jQuery. Here is what I'm doing:

var elem = $('.my_selector')[0];
elem.css('class', 'my_new_class');

But I get the error saying "Uncaught type error: Object#<HtmlDivElement> has no method css.

How do I fix it?

Alan Coromano
  • 24,958
  • 53
  • 135
  • 205
  • Also, take note that `.css()` is technically the same as refering to an elements `style=""` attribute. So what you're doing is the following: `
    `. Use `.prop('class', 'my_new_class')` or `addClass`/`removeClass`.     – h2ooooooo Apr 18 '13 at 11:53

7 Answers7

2

$('.my_selector')[0] is returning you a DOM element, not a jQuery Object. You'll also want to use the addClass method rather than css. To get the first element, you can use the :first pseudoselector.

So this should be what you are looking for:

$('.my_selector:first').removeClass('my_selector').addClass('my_new_class');

EDIT You can use either removeClass/addClass or toggleClass. Either are fine. Explicitly adding the new class may be safer if you have a case where an element can have both classes at the same time since toggleClass will remove both classes.

cfs
  • 10,610
  • 3
  • 30
  • 43
2

The problem is that you are trying to call jQuery method css() (even not relevant here) from DOM element, which is derived with [0]. You can use toggleClass() to do the job:

$(".my_selector:first").toggleClass("my_selector my_new_class");
VisioN
  • 143,310
  • 32
  • 282
  • 281
  • This is close, however it will remove the my_selector class, which the OP didn't say he wanted to do. That may cause problems for him later. – cfs Apr 18 '13 at 11:58
  • 2
    @colestrode *"I want to replace the old class of html element with the new one using jQuery"*. Not that close? – VisioN Apr 18 '13 at 11:59
  • Thanks for pointing that out... I missed that the first time I read it. – cfs Apr 18 '13 at 11:59
  • do I have to use my_selector as a parameter of toogleClass? – Alan Coromano Apr 18 '13 at 12:03
  • @AlanDert Yeah, if you want to remove `my_selector` class. – VisioN Apr 18 '13 at 12:03
  • 1
    @AlanDert You just send a string of classnames seperated by spaces `class1 class2 class3 ...`. the toggleClass will toggle each of the classes. So for you, you send one parameter a string `"my_selector my_new_class"` – Andreas Louv Apr 18 '13 at 12:05
1
var elem = $('.my_selector')[0];

This will return the DOM element, not a jQuery object. Simply change it to this...

var elem = $('.my_selector');

To get just the first element that matches the selector, use this...

var elem = $('.my_selector').first();

Also, you have...

elem.css('class', 'my_new_class');

This is incorrect and should be changed to this...

elem.attr('class', 'my_new_class');
Reinstate Monica Cellio
  • 25,975
  • 6
  • 51
  • 67
  • This will *never* fix the problem. – VisioN Apr 18 '13 at 11:50
  • it will return the array of jquery objects each of whose has .my_selector. what if I want just pick up the first of them? – Alan Coromano Apr 18 '13 at 11:51
  • @AlanDert If you just want the first then you have options, but I'd recommend `var elem = $('.my_selector').first();` – Reinstate Monica Cellio Apr 18 '13 at 11:51
  • This should be mentioned in the post, @Archer. – Shadow The GPT Wizard Apr 18 '13 at 11:52
  • 1
    What's fastest? `$('.my_selector').first()` or `$('.my_selector:first')`? I can imagine the latter, as it wouldn't have to create an array of all the elements first, just to select the first one, but I'm not sure. – h2ooooooo Apr 18 '13 at 11:54
  • 1
    Why people upvote it? `$('.my_selector').first().css("class", "new_class")` **WILL NEVER WORK**. – VisioN Apr 18 '13 at 11:55
  • @VisioN I've explained what is causing his error message, but to keep you happy I'll amend the answer to include the rest. – Reinstate Monica Cellio Apr 18 '13 at 11:56
  • @Archer I consider that as *not a complete answer* as if you answer "you are using `css` method in a wrong way". – VisioN Apr 18 '13 at 12:00
  • [Shouldn't `.prop` be used in 1.6+?](http://stackoverflow.com/questions/5874652/prop-vs-attr) – h2ooooooo Apr 18 '13 at 12:01
  • @Archer Using `attr("class")` is wrong here, since it will remove all additional classes (if any) set to the element. `addClass` and `removeClass` (or simply `toggleClass`) is the best way to go `:)` – VisioN Apr 18 '13 at 12:01
  • @VisioN That seems to be what OP wanted, though. – h2ooooooo Apr 18 '13 at 12:01
  • @VisioN That's what the OP wants. If not then he can let us know himself :) – Reinstate Monica Cellio Apr 18 '13 at 12:03
  • @h2ooooooo Well, the OP wants to remove the previously set class and add the new one. There is nothing mentioned if there are other class names used by the element. If not `.prop("className")` or `.attr("class")` will work. Otherwise not. My concern is that replacing all the attribute value is a bad practice here. – VisioN Apr 18 '13 at 12:05
0

Try this ,

var elem = $(".my_selector");
elem.class("newclass");

otherwise you can do,

var elem = $(".my_selector");
elem.removeClass("my_selector");
elem.addClass("newclass");
Aravind NC
  • 762
  • 7
  • 14
0
$(".my_selector").removeClass('currentClass').addClass('newClass');
VenkateshKumar
  • 96
  • 3
-1

As said, you need the jquery object of the first element. A good method could be this:

$('.my_selector').first().css('class', 'my_new_class');

Moreover the method signature is .css( propertyName, value ) so its intented to set a css property not to change a class. To do that you need to remove old class and add new one with .removeClass and .addClass respectively.

Alepac
  • 1,833
  • 13
  • 24
-3

$($('.my_selector')[0]).css('class', 'my_new_class');

document.getElementsByClassName('my_selector')[0].className = 'my_new_class';
VisioN
  • 143,310
  • 32
  • 282
  • 281
user2294813
  • 1
  • 1