loop array div id's

**ggalan** · 11-19-2010, 10:36 PM

lets say i have 3 divs with id's: #item1, #item2, #item3

how can i push these into an array and create a loop to make them display = none when the page loads?

Code:

var arr = new Array(item1, item2, item3);
for (i=0;i<=arr.length;i++){
document.write('<style>#arr{display:none;}</style>');
}

**jscheuer1** · 11-20-2010, 06:15 AM

Here's one way:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
(function(){
	var arr = ['#item1', '#item2', '#item3'];
	document.write('<style>' + arr.join(', ') + ' {display:none;}</style>');
})();
</script>
</head>
<body>
<div>
See me
</div>
<div id="item1">
No see me
</div>
<div id="item2">
Me either
</div>
<div id="item3">
Nor me
</div>
</body>
</html>

Looping is to be avoided unless required, as is writing multiple stylesheets. And you should probably be using a single class for this.

**ggalan** · 11-20-2010, 03:47 PM

oh ,
thank you

**jscheuer1** · 11-20-2010, 07:25 PM

It occurred to me that you might want to do it more like what you wrote. You can. But the list of issues that 'corrected' code would have is really long. If it's the only script on the page, or all other scripts on the page are better written . . . Then again, if the other scripts depend upon the coding flaws of this script in order to work as expected . . . things can get very complicated both functionally and as far as explaining things goes.

That said, here's how to get the original code to 'work':

Code:

var arr = new Array('item1', 'item2', 'item3');
for (i=0;i<arr.length;i++){
document.write('<style>#'+arr[i]+'{display:none;}</style>');
}

**ggalan** · 11-20-2010, 10:38 PM

intersting, i didnt think a simple loop could have such a cascading effect

**jscheuer1** · 11-21-2010, 03:25 AM

It's not the loop per se. As I said though, loops are to be avoided unless necessary. The reason for that is they are expensive as far as processing goes and more difficult to follow logically. There are more expensive and more convoluted methods though, so one shouldn't abandon a loop in favor of one of those if the loop will do and there's nothing simpler to replace the loop. To make matters a little more complex, there are various types of loops and various ways to execute them. Ideally all of this is taken into consideration when choosing the code used for any particular objective.

The two main problems (by no means the only two problems) that jump to mind with the code presented in my previous post are:

arr is a declared global variable. If other scripts use this common name in the global scope without first declaring it, there could be problems for these other scripts. If another script declares it before this script is run and then another script tries to use it later, expecting it to be the original value, there will be problems.
i is an undeclared global variable. If there is an element with an id of i, there could be problems in IE. If other scripts use an undeclared global i, it may no longer have the value these scripts are expecting.

With javascript, as in HTML there are two basic directions one may go in. You either use standard and best practices so that any problems that arise can be traced to typos or errors in judgment. Or you do whatever works, in which case you have to remember everything that was done before in analyzing any problems that may arise.

As things get more complex and involved, using standards and best practices will afford you the ability to diagnose problems more easily. However, at a certain point, only familiarity with the code can really help, except even that is more productive if you've followed standards and best practices.

Thread: loop array div id's

Thread Tools

Search Thread

loop array div id's

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions