You can do This :
$("#td_id").removeClass('Old_class');
$("#td_id").addClass('New_class');
Or You can do This
$("#td_id").removeClass('Old_class').addClass('New_class');
In the event that you already have a class and need to alternate between classes as oppose to add a class, you can chain toggle events:
$('li.multi').click(function(e) {
$(this).toggleClass('opened').toggleClass('multi-opened');
});
I think he wants to replace a class name.
Something like this would work:
$(document).ready(function(){
$('.blue').removeClass('blue').addClass('green');
});
from http://monstertut.com/2012/06/use-jquery-to-change-css-class/
this method works well for me
$('#td_id').attr('class','new class');
$('.btn').click(function() {
$('#td_id').removeClass();
$('#td_id').addClass('newClass');
});
or
$('.btn').click(function() {
$('#td_id').removeClass().addClass('newClass');
});
EDIT:
If you're saying that you're changing it from a nested element, you don't need the ID at all. You can do this instead:
$(this).closest('td').toggleClass('change_me some_other_class');
//or
$(this).parents('td:first').toggleClass('change_me some_other_class');
Original answer:
$('#td_id').removeClass('change_me').addClass('some_other_class');
Another option is:
$('#td_id').toggleClass('change_me some_other_class');
So you want to change it WHEN it's clicked...let me go through the whole process. Let's assume that your "External DOM Object" is an input, like a select:
Let's start with this HTML:
<body>
<div>
<select id="test">
<option>Bob</option>
<option>Sam</option>
<option>Sue</option>
<option>Jen</option>
</select>
</div>
<table id="theTable">
<tr><td id="cellToChange">Bob</td><td>Sam</td></tr>
<tr><td>Sue</td><td>Jen</td></tr>
</table>
</body>
Some very basic CSS:
?#theTable td {
border:1px solid #555;
}
.activeCell {
background-color:#F00;
}
And set up a jQuery event:
function highlightCell(useVal){
$("#theTable td").removeClass("activeCell")
.filter(":contains('"+useVal+"')").addClass("activeCell");
}
$(document).ready(function(){
$("#test").change(function(e){highlightCell($(this).val())});
});
Now, whenever you pick something from the select, it will automatically find a cell with the matching text, allowing you to subvert the whole id-based process. Of course, if you wanted to do it that way, you could easily modify the script to use IDs rather than values by saying
.filter("#"+useVal)
and make sure to add the ids appropriately. Hope this helps!
change class using jquery
try this
$('#selector_id').attr('class','new class');
you can also set any attribute using this query
$('#selector_id').attr('Attribute Name','Attribute Value');
You can check out addClass or toggleClass
I better use the .prop to change the className and it worked perfectly:
$(#td_id).prop('className','newClass');
for this line of code you just have to change the name of newClass, and of course the id of the element, in the next exemple : idelementinyourpage
$(#idelementinyourpage).prop('className','newClass');
By the way, when you want to search which style is applied to any element, you just click F12 on your browser when your page is shown, and then select in the tab of DOM Explorer, the element you want to see. In Styles you now can see what styles are applied to your element and from which class its reading.
I think you're looking for this:
$('#td_id').removeClass('change_me').addClass('new_class');
Source: Stackoverflow.com