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

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);
}