How to add a duplicate class to a DOM object using jQuery?

Question

Lets say I have an element

<a class="Foo Bar" />

And I want to add a duplicate class, so as I code this:

$('.Bar').addClass('Foo');

The class is not added, because the element already has one.

I want to code something like this:

$('.Bar').addClassForcebly('Foo'); // Fake method, only for example.

And I expect the following result:

<a class="Foo Bar Foo" />

I have tried to use the jQuery's addClass method's overload:

$('.Bar').addClass(function(i, c) {
    return c + ' Foo';
});

But this does not work either. It just does not add the duplicate class. How do I do that?

The point of this question is pretty simple: I want to make my HTML elements be able to be disabled and enabled mulitple times. If I 'disable' an element twice (adding two same classes) I should 'enable' it twice as well in order for my logic to work.

Can you tell what advantage/difference is obtained by having a class duplicated? I can't figure out any. — techfoobar
– techfoobar, Commented Dec 4, 2013 at 13:49
It's really a browser interpretation problem; you have no point to assign the same class two times to a DOM object. — DocKuro
– DocKuro, Commented Dec 4, 2013 at 13:50
I dont think so it is helpful because class is already add once. Is there any specific reason AgentFire — Bhavesh Parekh
– Bhavesh Parekh, Commented Dec 4, 2013 at 13:50
Better yet, use counter in attribute like data-disabled (really faster then using .data). — Cthulhu
– Cthulhu, Commented Dec 4, 2013 at 13:55
[data-disabled="0"] for zero, and css has :not() for finding non-zero. — Cthulhu
– Cthulhu, Commented Dec 4, 2013 at 13:56

VicJ · Accepted Answer · 2013-12-04 13:52:06Z

2

lets say its the only anchor and you already have this "Foo Bar" added

var myAnchor = document.getElementsByTagName("a")[0];
myAnchor.className += " Foo";

answered Dec 4, 2013 at 13:52

VicJ

1311 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adil · Accepted Answer · 2013-12-04 13:58:38Z

2

I dont see any use of it but you can do it by something like using each()

$('.Bar').each(function(){
   this.className = "Foo" + this.className;
});

OR, you can use attr( attributeName, function(index, attr) ) overload that has callback function.

$( ".Bar" ).attr( "class", function( i, val ) {
  return "Foo" + val ;
});

edited Dec 4, 2013 at 13:58

answered Dec 4, 2013 at 13:51

Adil

148k25 gold badges217 silver badges207 bronze badges

Comments

nnnnnn · Accepted Answer · 2013-12-04 14:18:08Z

" If I 'disable' an element twice (adding two same classes) I should 'enable' it twice as well in order for my logic to work."

You could create your own plugin that keeps track of how many times the class has been added, something like this:

(function($) {
    $.fn.addClassWithCount = function (className) {
        return this.each(function() {
            var $this = $(this),
                count = $this.data("disable-count-" + className) + 1 || 1;
            $this.data("disable-count-" + className, count);
            $this.addClass(className);
        });
    };
    $.fn.removeClassWithCount = function (className) {
        return this.each(function() {
            var $this = $(this),
                count = $this.data("disable-count-" + className) - 1 || 0;
            if (count < 0) count = 0;
            $this.data("disable-count-" + className, count);
            if (count === 0)
                $this.removeClass(className);            
        });
    };
})(jQuery);

Which you'd then use like the standard .addClass() and .removeClass():

$("someSelector").addClassWithCount("someClass");

Demo: http://jsfiddle.net/Sve9Q/2/

Note that the above is just something I cobbled together quickly to give you the general idea, so obviously it could be prettied up and made more robust.

Artek Wisniewski · Accepted Answer · 2013-12-04 13:53:41Z

1

I think that jQuery checks for duplicates when adding classes with addClass, you could just use

$('.Bar').each(function(i, e) {

  e.attr('class', e.attr('class') + ' Foo');

});

answered Dec 4, 2013 at 13:53

Artek Wisniewski

7975 silver badges13 bronze badges

Comments

DocKuro · Accepted Answer · 2013-12-04 14:08:51Z

1

For the use you specified, my opinion is that your best choice should be a class that includes the number of times it has been disabled.

The fist time you add a 'disabled' class.

If an element is already 'disabled' you add a 'disabled2' class (or replace the 'disabled' with 'disabled2') etc...

When re-enabling you do the opposite.

You can use a [class^="disabled"] CSS3 selector to match all the disabled* classes you want to add, without specify them explicitly in your CSS.

edited Dec 4, 2013 at 14:08

answered Dec 4, 2013 at 13:56

DocKuro

4444 silver badges13 bronze badges

6 Comments

AgentFire Over a year ago

I have a CSS in my site and it does not like these options.

DocKuro Over a year ago

what options? I'm talking about making CSS class with names

AgentFire Over a year ago

In case my UI logic decides to disable an element ten times - you advise me to prepeare the CSS for that by creating ten disabled classes?

DocKuro Over a year ago

You don't need to prepare them in advance, if you don't want specific graphic effects you can just add a class to an element even if that class doesn't exist in your CSS

DocKuro Over a year ago

I don't get it... you can add a 'Foo' class to any DOM element, even if the Foo class doesn't exist in the site CSS. If it does exist, the element will be decorated accordingly, otherwise it will just have a class appended to his class list. You have your disabled class and you add it when you first disable the element, then you can create a CSS rule that match [class^="disabled"] and that will be applied to all disabled* classes. Look at w3.org/TR/css3-selectors/#attribute-substrings

|

Bhavesh Parekh · Accepted Answer · 2013-12-04 14:01:21Z

0

Please check below code

$(function(){
    alert($(".Bar").attr("class"));

    $(".Bar").attr("class",($(".Bar").attr("class") + ' Foo'));

    alert($(".Bar").attr("class"));

});

You can check below link

http://jsfiddle.net/GS43e/

answered Dec 4, 2013 at 14:01

Bhavesh Parekh

2122 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to add a duplicate class to a DOM object using jQuery?

6 Answers 6

Comments

Comments

Comments

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related