Switching class between two elements using jQuery

Question

I have two elements with a class name each. And on some event I'd like them to switch class.
So basically I'd like to do something like this:

$("#div1").switchClassWith("#div2");

<div id="div1" class="someStylingClass">...content...</div>
<div id="div2" class="someOtherClass">...content...</div>

And this would result in #div1 having someOtherClass as its class name, and #div2 have someStylingClass... Any suggestions?

Do you know what these classes are ahead of time, or could they be anything? — Nick Craver, Aug 25 '10 at 19:02
suggestion: the example looks more like a swapClasses(div1, div2) than div1.switchClassWith(div2) — Rahul, Aug 25 '10 at 19:04
@Nick: Yeah, I know what the class names are going to be, so I was just looking for something easier than creating a function, which would have to create temp variables and such... — peirix, Aug 25 '10 at 20:09

user229044 · Accepted Answer · 2010-08-25T20:06:47.403

11

You could use toggleClass():

 $('#div1,#div2').toggleClass('someStylingClass someOtherClass');

Assuming you start with the example you posted, where each element has one class or the other (but not both) then this will work as expected.

If you need to swap the classes without knowing what classes you're swapping, you can do:

var $div1 = $('#div1'), $div2 = $('#div2'), tmpClass = $div1.attr('class');
$div1.attr('class', $div2.attr('class'));
$div2.attr('class', tmpClass);

edited Aug 25 '10 at 20:06

answered Aug 25 '10 at 19:00

user229044

232,980
40
330
338

2

`.toggleClass('someStylingClass someOtherClass')` :) – Nick Craver Aug 25 '10 at 19:01
It's better to cache the div1 and div2 selection. In this case you've selected both of the 2 times instead of only once. – IgalSt Aug 25 '10 at 19:25
I knew there had to be some sweet, sweet, one-liner to fix this! – peirix Aug 25 '10 at 20:07

score 1 · Answer 2 · answered Aug 25 '10 at 19:04

1

function SwitchClass(a,b){
  var aClass = a.attr('class');
  var bClass = b.attr('class');
  a.removeClass(aClass).addClass(bClass);
  b.removeClass(bClass).addClass(aClass);
}


SwitchClass($('div1'),$('div2'));

answered Aug 25 '10 at 19:04

IgalSt

1,974
2
17
26

score 1 · Answer 3 · answered Aug 25 '10 at 19:08

pseudo code



function swapClasses(element1, element2)
{
   class1List1 = getClassList(element1)
   classList2 = getClassList(element2)

   for class in classList1
   {
       element2.addClass(class)
   }

   //similarly for element1
}

function getClassList(element)
{
   //refer to http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery
}

score 0 · Answer 4 · answered Aug 25 '10 at 19:00

0

jQuery UI switchClass ?

answered Aug 25 '10 at 19:00

Switching class between two elements using jQuery

4 Answers4