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]]});
    }

Answer 1

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

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.