Javascript shorthand way to duplicate strings

Question

I have this code in a function, and want to shorten it - it applies the same style to every item in an array.

document.getElementById(divsArray[0]).style.visibility='hidden'; document.getElementById(divsArray[1]).style.visibility='hidden'; document.getElementById(divsArray[2]).style.visibility='hidden'; document.getElementById(divsArray[3]).style.visibility='hidden';

NO answer to date worked (Because I am looping thru the code??)

Resolved it by setting only the previously displayed slide visibility to hidden

 x=i;
 i=i+1;

 document.getElementById(divsArray[x]).style.visibility='hidden'

Answer 1

How about using a loop:

for (var i = 0; i < 4; i++) {
    document.getElementById(divsArray[i]).style.visibility = 'hidden'; 
}

Answer 2

for (i=0;i<4;i++) {
  document.getElementById(divsArray[i]).style.visibility='hidden';
}

Answer 3

Just to provide something different, a jQuery solution:

$(divsArray).each(function() {
  $(this).css("visibility", "hidden");
});

Edit: It looks like you might have to collect your DOM references first. (divsArray is really just an array of div names, and not the divs themselves?)

$(divsArray).each(function() {
  $("#" + this).css({ "visibility": "hidden" });
});

Answer 4

It sounds to me that there might be more divs... Might I suggest this change to Darin's code:

for (var i = 0; i < divsArray.length; i++) {
   document.getElementById(divsArray[i]).style.visibility = 'hidden'; 
}

Answer 5

And here's how it works in both Prototype and Mootools:

$(divsArray).each(function(item) {
  $(item).setStyle({visibility: "hidden"});
});

Answer 6

You can put the following function in the same/descendant scope of divsArray.

function baka(idx) {
  document.getElementById(divsArray[idx]).style.visibility = 'hidden';
}

Then you can do either

baka(0);
baka(1);
baka(2);
baka(3);

or

for (var i = 0; i < 4; i++)
  baka(i);

It looks pointless, but if you have more arrays like that, you may want to modify your function like this:

function aho(arr, idx) {
  document.getElementById(arr[idx]).style.visibility = 'hidden';
}

and loop through any array like this:

for (var i = 0; i < divsArray.length; i++)
  aho(divsArray, i);

And no, there are no macros nor are there templates.

Answer 7

as long as we're all piling on, i'll take the most direct approach :D

document.getElementById(divsArray[0]).style.visibility =
document.getElementById(divsArray[1]).style.visibility =
document.getElementById(divsArray[2]).style.visibility =
document.getElementById(divsArray[3]).style.visibility = 'hidden';

and just to go against the grain:

var d = null, i = 0;
while (d = document.getElementById(divsArray[i++])) {
    d.style.visibility = 'hidden';
}

Answer 8

I couldn't "resist" to the challenge. I would say you add them the same class and do something like (Prototype example):

$$('.className').invoke('setStyle', { 'visibility' : 'hidden' });