How to replace the class using jQuery - javascript

Hi all. I am using jQuery and I want to replace the class on the DIV using jQuery.
I know that I can replace the class like this:
$('#div').removeClass('first').addClass('second');
But, I can use this only when I know the first class name. In my case, I do not know the first class name because it is dynamic.


You can use attr() to set the class, it will over write the previous class
$('#div').attr('class', 'second');
You can call removeClass without parameters
$('#div').removeClass().addClass('second');


When you call removeClass with no parameters this will remove all classes
$("#div").removeClass().addClass('second');


Try this :
$("#div").removeAttr('class');
$('#div').attr('class','second');
First line will remove the calss attribute, second will add a class with name second


The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.
$("#div").toggleClass(second,function(index,first),TRUE)


Try this:
$('#div').removeAttr('class').attr('class', 'second');

Related

How to select element with single class name in Jquery?

I have below html and want to get the element based on 'natural' class. The reason is I get t dynamic classes after 'natural'
<coral-checkbox class="natural coral-Form-field coral3-Checkbox" ></coral-checkbox>
I am trying below code to get hide the element but it is not working.
$("coral-checkbox[class='.natural']").hide();
But it is working when I select entire class like below but I need to do with only 'natural'. Is this possible ?
$("coral-checkbox[class='.natural coral-Form-field coral3-Checkbox']").hide();

Use .classname to select based on any of the element's classed. When you use an attribute selector, it matches the entire attribute (unless you use modifiers like *=, but they're not appropriate here, either).
$("coral-checkbox.natural").hide();

Use the class the selector instead of the attribute selector:
$("coral-checkbox.natural").hide();

how to add class to all tables without class in JS or JQ?

i need to add class in JS or JQ to all the tables without class in a site, some already as class so i need it to add the class only to the tables who doesn't have... please advice?
edit: i also need the class to be unique with number after the name of the class
$('table').each(function(i){
$(this).addClass('classname',i);
});

the addClass method only adds a class if it not exist in the selected element.
this works
$('table').addClass('classname');

If you need to add a class to only those tables without any classes (and not just all your tables), you can use:
$('table').each(function() {
if (!$(this).attr('class') || !$(this).attr('class').length) $(this).addClass('zzz')
})

You can check with not selector if particular class is not applied then apply it:
$("table:not(.classname)").addClass("classname");
Update:
But as others have mentioned you don't need to do that as addClass will take care of not adding class if it is there.

If you just want to target tables that don't have any class, you can use :not and the attribute selector
$('table:not([class!=""])').addClass('test');
that would be the same as:
$('table[class=""],table:not([class])').addClass('test');

The right way to remove a class with jQuery

I have a simple question that interests me a lot:
If I want to remove a CSS class with jQuery, what's the right way?
1. removing after checking for the existence of the class?
if($(div).hasClass('css-class')) {
$(div).removeClass('css-class');
}
2. just removing it?
$(div).removeClass('css-class');
3.any other suggestions?

Just remove it. It's not like jQuery's going to throw an error (or anything like that) if the element does not have the class you're removing.
$(div).removeClass('css-class');

For removing class using jquery I prefer the 1st option for checking existence of class for a specific dom element and then remove the class applied for that DOM element eventhough jquery does not throw any error even if that DOM element has not been applied that class
E.g.
if($(div).hasClass('css-class')) {
$(div).removeClass('css-class');
}

jquery remove all items within div that does not have a class

I have a asp.net Listview that is generating extra elements, good thing is the elements that I do want have a class name. How do I remove the s without the specific class that i need in jquery thanks!

Use the :not selector:
$("div:not([class])").remove();
Edit: jsfiddle.

class is just an attribute so you can select each one that doesn't have the attribute:
$('div:not([class])').remove()

$('div:not([class])').remove();

When you use jQuery .removeClass() does it return an error when run on an element that does not have that class?

I have four html elements that when clicked I want to have a specific class applied to. The problem is that that class is only for one of the four at any one time. I want to when one element is clicked have that class removed from the other three elements and applied to the one that was clicked. If I were to run a loop that removed that class from every single element before applying that class to the element clicked would there be an error on the elements that did not have that class?

#chrome dude, no there won't be any problem. Jquery takes care of null check. If you have class it will do it otherwise it won't do it.

No. The removeClass() function returns jQuery (the same jQuery object it was invoked on) and won't do anything if the class isn't present. You really only need to remove the class from the element that has it, though.
$('a').click( function() {
$('a.foo-class').removeClass('foo-class');
$(this).addClass('foo-class');
});

No.

Categories

Resources