How can I replace a class with another using jQuery?

Question

What jquery can I use to change the class that's used in the following from indent_1 to indent_2 or indent_4 to indent_2? I know about remove class but how can I do that when the classes are names that vary?

<div class="rep_td0 indent_1" id="title_1">Menu two</div> 
or 
<div class="rep_td0 indent_4" id="title_1">Menu two</div>

Answer 1

try this code,

$("#title_1").removeClass("indent_1").addClass("indent_2");

if you not sure which is available, try this

$("#title_1").removeClass("indent_1").removeClass("indent_4").addClass("indent_2");

---

Updated:

$("#title_1").removeClass(function() {
    var match = $(this).attr('class').match(/\bindent_\d+\b/);
    if (match) {
        return (match[0]);
    } else {
        return ("");
    }
}).addClass("indent_2");

Answer 2

Since you haven't been very specific about exactly what class you want to change to another and you've said you want to deal with the case where you don't know exactly what the class is, here are some ideas:

You can find all objects that have a class that starts with "indent_" with this selector:

$('[className^="indent_"]')

If you wanted to examine the class on each one of those objects, you could iterate over that jQuery object with .each() and decide what to do with each object or you could use removeClass() with a custom function and examine the class name and decide what to do with it.

If you just wanted to change all indent class names to indent_2, then you could use this:

$('[className^="indent_"]').removeClass("indent_1 indent_3 indent_4").addClass("indent_2");

or, using a custom function that can examine the class name with a regex:

$('[className^="indent_"]').removeClass(function(index, name) {
    var match = name.match(/\bindent_\d+\b/);
    if (match) {
        return(match[0]);
    } else {
        return("");
    }
}).addClass("indent_2");

Or, if all you want to do is find the object with id="title_1" and fix it's classname, you can do so like this:

var o = document.getElementById("title_1");
o.className = o.className.replace(/\bindent_\d+\b/, "indent_2");

You can see this last one work here: http://jsfiddle.net/jfriend00/tF8Lw/

If you're trying to make this into a function that could take different numbers, you could use this:

function changeIndentClass(id, indentNum) {
    var item = document.getElementById(id);
    item.className = item.className(/\bindent_\d+\b/, "indent_" + indentNum);
}

Answer 3

Try below :

$('#title_1').removeClass('indent_1').addClass('indent_2');

Here, the indent_1 classes will be replaced with indent_2.

Answer 4

Maybe this?: Remove all classes that begin with a certain string

That answers how to replace a classname on a jQuery element that has a specific prefix, such as 'indent_'.

While that answer doesn't specifically address replacement, you can achieve that by altering one of their answers slightly:

$("selector").className = $("selector").className.replace(/\bindent.*?\b/g, 'indent_2');

Or similar...

Answer 5

First things first...If you have multiple elements on your page with the exact same ID you're going to have problems selecting them by ID. Some browsers won't work at all while others may return just the first element that matches.

So you'll have to clean up the ID thing first.

You can use the starts with selector to find all the classes that match your class name patter and then decide if you want to switch them or not:

$('[class^="indent_"]').each(function() {
   var me = $(this);
   if(me.hasClass("indent_1").removeClass("indent_1").addClass("indent_2");
});