jQuery split variable values in array

Question

I have a div with an ID of '#Main" and I am trying to change CSS classes for this div with a collection of variables. using + ' ' + between the variables seems to add lots of empty space between classes therefore I was trying to use add all variables in an Array and use split property but so far I am unable to do so.

My code:

jQuery

var MainClasses ="";
var BackgroundColor="";
var BackgroundPattern ="";
var TxtColor="";
// Some code & conditions here which is assigning CSS classes to these variables
BackgroundColor = "Background-Red";
BackgroundPattern ="Pattern-2";
TxtColor = "Txt-Color-Green";
upDateTheme();
function upDateTheme() {
 $('#Main').removeClass();
 var ClassColletion = 'BackgroundColor, BackgroundPattern, TxtColor';
 MainClasses = ClassColletion.split(' ');
 $( '#Main' ).addClass(MainClasses );
}

Expected HTML Result

<div id="Main" class="Background-Red Pattern-2 Txt-Color-Green"> Some Content here </div>

• Filnor: ``var ClassCollection...` ist not a proper array. what you wanna do is more like var ClassColletion = [BackgroundColor, BackgroundPattern, TxtColor];

Answer 1

A couple things here:

1. You don't need to initialize your MainClasses object to a string. In fact, don't even use that extra variable. Just use your ClassCollection.
2. When you do the split, split on the comma, not the space.
3. Put your variables inside an array.
4. Use a loop to apply the class names (addClass). Array objects are not supported out of the box.

This should get you going:

var BackgroundColor="";
var BackgroundPattern ="";
var TxtColor="";
// Some code & conditions here which is assigning CSS classes to these variables
BackgroundColor = "Background-Red";
BackgroundPattern ="Pattern-2";
TxtColor = "Txt-Color-Green";
upDateTheme();
function upDateTheme() {
 $('#Main').removeClass();
 var ClassColletion = [BackgroundColor,BackgroundPattern,TxtColor];
 for (var i in ClassColletion) {
 if (i && ClassColletion[i]) {
 $( '#Main' ).addClass(ClassColletion[i]);
 }
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='Main'>main div</div>

• kamran shah: friend its adding the name of the variable in the HTML instead of the value of those variables. Reason for trying split is what if any variable do not have a class i.e. if var BackgroundPattern has no class so there should not be extra space in HTML.
• Matt Spinks: I actually didn't notice that until after my first post, so you are probably looking at the old version of my post. Check my updated post. It is assigning the value of the variables (not the variable names).
• kamran shah: Thanks Matt, this solved the problem BUT there is one error i see. My editor is showing an alert that the body of for in should be wrapped in an if statement to filter unwanted properties from the prototype. Any suggestions about this please?
• Matt Spinks: @kamranshah it is possible that you could have a null or undefined element in your array (depending on what happens in other parts of your code that assign to this array). I just updated my answer to include a conditional statement that should take care of this. Check it out when you have a chance.
• kamran shah: once again, thanks a lot friend, not that alert is gone

Answer 2

From jQuery documentation :

.addClass(className)

className; Type: String; One or more space-separated classes to be added to the class attribute of each matched element.

Thererfore

BackgroundColor = "Background-Red";
BackgroundPattern = "Pattern-2";
TxtColor = "Txt-Color-Green";
upDateTheme();
function upDateTheme() {
 $('#Main').removeClass();
 var ClassColletion = [BackgroundColor, BackgroundPattern, TxtColor];
 var MainClasses = ClassColletion.join(' ');
 $('#Main').addClass(MainClasses);
}

Or, in a single expression :

function upDateTheme() {
 $('#Main').removeClass().addClass([BackgroundColor, BackgroundPattern, TxtColor].join(' '));
}