Jump to content

Recommended Posts

I have a series of <ul> tags which have been assigned IDs like progMenu1, progMenu2, progMenu3, etc. which are used to create fly-out menus with CSS & JavaScript. Note that the menus work fine.

 

What I'm looking for is a more efficient way (using JavaScript) to make sure all the menus are closed. I'm currently using the following code:

 

...

for(var i=1; i<=10; i++) {
     if(document.getElementById('progMenu' + i)) {
          document.getElementById('progMenu' + i).style.left = "-999em";
     }
}

...

 

 

The problem is that I'm just blindly looking for IDs in the for loop. Is there a way to get all the IDs which start with 'progMenu', then just loop through the results?

You could grab all <ul> elements via getElementsByTagName, then search through those using regex on their ids, storing the matches in another array.  That would allow you to add/remove menus without having to hard code the number of them in a for-loop.  You could then simply loop through them like:

 

for(var i = 0; i < menus.length; ++i) {
   menus[i].style.left = "-999em";
}

 

It takes more upfront processing, but it's a more elegant solution overall.

Thanks Nightslyr, the code appears to be working.

 

Out of curiosity, is there a reason why you pre-incremented (++i) the counter instead of using post-increment (i++)?

 

 

For reference, here is the modified code:

 

...

//IF getElementById AND getElementsByTagName ARE SUPPORTED
if(document.getElementById && document.getElementsByTagName) {
     //IF THE browseByProgram ELEMENT WAS FOUND
     if(document.getElementById('browseByProgram')) {
          //GET THE CHILDREN FOR browseByProgram WHICH ARE UNORDERED LISTS
          var array_menus = document.getElementById('browseByProgram').getElementsByTagName('ul');

          //LOOP THROUGH THE UNORDERED LISTS
          for(var i=0; i<array_menus.length; i++) {
               //IF THE CURRENT LIST HAS AN ID ATTRIBUTE IT'S A FLY-OUT MENU, HIDE THE LIST FOR NOW
               if(array_menus[i].getAttribute('id')) {
                    array_menus[i].style.left = "-999em";
               }
          }
     }
}

...

Thanks Nightslyr, the code appears to be working.

 

Out of curiosity, is there a reason why you pre-incremented (++i) the counter instead of using post-increment (i++)?

 

It's mostly a stylistic thing.  I've heard some others say it's a bit faster than the post-increment, but I'm not entirely sure about that.  For for-loops, since the index simply needs to be incremented without any kind of value check until after the incrementation, it doesn't really matter when the incrementation takes place.  I figure why not do it as soon as possible?

 

So, yeah, mostly for irrational, "it's different" reasons. ;)

There are other areas where incrementing the variable first does have an affect. For example:

 

var x = 1;
var y = x++; // value of y would be 1

var x = 1;
var y = ++x; // value of y would be 2

 

That's because the incrementation is done prior to the assignment in the second example, where as it's done after in the first.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.