Create Javascript array with Javascript for loop

Question

I have a series of information that I am looking to cut down to size by looping the information. Here is the original code that is working:

$('#M1s1').css({'visibility': M1s1v});
$('#M1s2').css({'visibility': M1s2v});
$('#M1s3').css({'visibility': M1s3v});
$('#M1s4').css({'visibility': M1s4v});
$('#M1s5').css({'visibility': M1s5v});
$('#M1s6').css({'visibility': M1s6v});
$('#M1s7').css({'visibility': M1s7v});
$('#M2s1').css({'visibility': M2s1v});
$('#M2s2').css({'visibility': M2s2v});
$('#M2s3').css({'visibility': M2s3v});
$('#M2s4').css({'visibility': M2s4v});
$('#M2s5').css({'visibility': M2s5v});
$('#M2s6').css({'visibility': M2s6v});
$('#M2s7').css({'visibility': M2s7v});
$('#M3s1').css({'visibility': M3s1v});
$('#M3s2').css({'visibility': M3s2v});
$('#M3s3').css({'visibility': M3s3v});
$('#M3s4').css({'visibility': M3s4v});
$('#M3s5').css({'visibility': M3s5v});
$('#M3s6').css({'visibility': M3s6v});
$('#M3s7').css({'visibility': M3s7v});
$('#M4s1').css({'visibility': M4s1v});
$('#M4s2').css({'visibility': M4s2v});
$('#M4s3').css({'visibility': M4s3v});
$('#M4s4').css({'visibility': M4s4v});
$('#M4s5').css({'visibility': M4s5v});
$('#M4s6').css({'visibility': M4s6v});
$('#M4s7').css({'visibility': M4s7v});
$('#M5s1').css({'visibility': M5s1v});
$('#M5s2').css({'visibility': M5s2v});
$('#M5s3').css({'visibility': M5s3v});
$('#M5s4').css({'visibility': M5s4v});
$('#M5s5').css({'visibility': M5s5v});
$('#M5s6').css({'visibility': M5s6v});
$('#M5s7').css({'visibility': M5s7v});

And here is the for loops that I created to try and cut down the length of code and possibility of typing errors:

// set smc array(#M1s1, #M1s2, #M1s3, etc.)
var smc = [];
for (m = 1; m < 6; m++) {
 for (s = 1; s < 8; s++) {
 var smc[] = '#M' + m + 's' + s;
 }
}
// set smcv array(#M1s1v, #M1s2v, #M1s3v, etc.)
var smcv = [];
for (mv = 1; mv < 6; mv++) {
 for (sv = 1; sv < 8; sv++) {
 var smcv[] = '#M' + mv + 's' + sv + 'v';
 }
}
// loop to set visibility of small circles
for (i = 0; i < 35; i++) {
 $(smc[i]).css({'visibility': smcv[i]});
}

I am really new to javascript loops and feel like I may be overlooking something basic or even a syntax error of some kind but can't put a finger on what the problem is. Any direction or assistance would be greatly appreciated!

UPDATE

Here is the final solution to my problem:

//set smc array(#M1s1, #M1s2, #M1s3, etc.)
 var smc = [];
 for (m = 1; m < 6; m++) {
 for (s = 1; s < 8; s++) {
 smc.push('#M' + m + 's' + s);
 }
 }
//set smcv array(#Ms1v, #M1s2v, #M1s3v, etc.)
 var smcv = [];
 for (mv = 1; mv < 6; mv++) {
 for (sv = 1; sv < 8; sv++) {
 smcv.push('M' + mv + 's' + sv + 'v');
 }
 }
//loop to set visibility of small circles
 for (i = 0; i < 35; i++) {
 $(smc[i]).css({'visibility': window[smcv[i]]});
 }

• Kong: @dvenkatsagar - The numbers will get coerced to strings through the addition operator.
• Jaromanda X: you need to learn about Arrays - specifically the .push method in your case ... then you need to realise that variable M1s1v is not the same as the string "M1s1v" ... but global variable named M1s1v can be accessed like window['M1s1v']
• dvenkatsagar: Is M1s1v a variable with a certain value??

Answer 1

You can't push value to array using var smc[] = 'something'.
Use smc.push( 'something' )

• Craig Howell: This is definitely the direction that I am looking to go. All of the arrays are populating perfectly however now my loop is not working correctly. The loop is defaulting all visibility to "visible". I think this is because smcv[] is actually an array of variable names and it seems like they may be getting stored as strings. Is there a workaround for this?
• Craig Howell: I have this working now. Answer has been updated with the solution.

Answer 2

Lets say the M1s1v,M1s2v,.... values are coming from a json variable, something like this:

var x = {
 M1s1v : "hidden",
 M1s2v : "visibile",
 ...
}

then you can cut-short the code to something like this:

for (m = 1; m < 6; m++) {
 for (s = 1; s < 8; s++) {
 $('#M' + m + 's' + s).css({'visiblity':x['M'+m+'s'+s+'v']});
 }
}

Hope it helps.

Answer 3

Say you have a two dimensional array, 5 x 7 for M and s holding something that will evaluate to true/false (boolean, 0, 1, empty string...).

var data = [][];
...
for (var M=0; M < data.length; M++) {
 for (var s=0; s < data[M].length; M++) {
 $('#M' + (M+1) + 's' + (s+1)).css({'visibility': data[M][s] ? 'visible' : 'hidden'});
 }
}

You could "optimize" by using hard coded numbers instead of the lengths if you were centian of the dimensions.