Preventing an element having duplicate classnames

Question

I would like to prevent duplicate classnames on an element using JavaScript.

When I run the following code, I get the classname "Test 1" twice.

Here's my HTML:

<body>
    <div id="foo">Hey</div>
</body>

and my Javascript:

function addClass(element, myClass) {
   var add = element.className += ' ' + myClass; 
}

addClass(foo,'Test1');
addClass(foo,'Test1');
addClass(foo, 'Test2');

I would like my result to be:

<div id="foo" class=" Test1 Test2">Hey</div>

and not

<div id="foo" class=" Test1 Test1 Test2">Hey</div>

Is there any way I can achieve this?

So check the `className` property for the presence of the class you are adding. — Kevin Boucher, May 25 '13 at 21:49
This might be helpful to you: http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript — Christofer Eliasson, May 25 '13 at 21:55

alexkonradi · Accepted Answer · 2013-05-25T22:02:56.880

3

Use the string.contains() method when adding the class; try something like

function addClass(element, myClass) {
   if(!element.className.contains(myClass))
       element.className += ' ' + myClass; 
}

EDIT

Use string.split(" ") to break the class names up (to avoid matching partial class names), then use indexOf to check to see if the class has been added already. Something like

function addClass(element, myClass) {
   if(element.className.split(" ").indexOf(myClass)==-1)
       element.className += ' ' + myClass; 
}

edited May 25 '13 at 22:02

answered May 25 '13 at 21:50

alexkonradi

750
5
5

This is good in all cases except when it adds a class whose name is a substring of a previously added class. – Tap May 25 '13 at 21:52
3

`string.contains()` is only supported by firefox at the moment. – Sam Dufel May 25 '13 at 21:52
1

Why not `element.className.indexOf(myClass) === -1`? But still, what @Tap said is true. – SeinopSys May 25 '13 at 21:53
2

Ah sorry, they must have added it. Still, it's not supported in ie9, and shouldn't be used for general purpose sites yet. – Sam Dufel May 25 '13 at 22:03
1

The `split(" ")` is very clever. +1 – SeinopSys May 25 '13 at 22:03

dsgriffin · Answer 2 · 2013-05-26T09:54:14.673

3

jsFiddle here.

Use indexOf() to see if it already has that class. Note that the solution by itself would cause problems when having classes that contain part of another, so I've slightly changed it (New solution is a little ugly but meh)

function addClass(element, myClass) {
   if((" " +element.className+ " ").indexOf(" "+myClass+" ") == -1)
       element.className += ' ' + myClass; 
}

edited May 26 '13 at 09:54

answered May 25 '13 at 21:53

dsgriffin

66,495
17
137
137

Still, what if the element has a class of `grapefrut` and he wants to add the class `ape`? The script won't allow him to. – SeinopSys May 25 '13 at 21:56
Notice that this will fail if you have the class `btn-dark` and try to add `btn` for instance. – Christofer Eliasson May 25 '13 at 21:57
@Zenith What about `class="myClass otherClass"` or `class="otherClass myClass"`? – SeinopSys May 25 '13 at 22:04
@Zenith Still isn't reliable if the element already has classes defined initially. – SeinopSys May 25 '13 at 22:08
@DJDavid98 How isn't it exactly? Try it out for yourself http://jsfiddle.net/NN5Cv/2/ – dsgriffin May 25 '13 at 22:09

score 0 · Answer 3 · answered May 26 '13 at 02:25

I suppose if you are adding a class you want that class to have precedence- if it exists already but was superceded in the cascade by another class, move the old instance to the end of the class definitition-

function addCLass(who,cname){
    var rx= RegExp('\\b'+cname+'\\b','g'),
    C=who.className.replace(rx,'').split(/\s+/).push(cname);
    who.className= C.join(' ');
}

Preventing an element having duplicate classnames

3 Answers3