PrototypeJS loop won't run

I have a loop which won't run using Prototype + Scriptaculous. It runs once for the first object in my array then stops.

var myMessages = new Object();
        myMessages = ['success','info','warning','error']; // define the messages types      
        function hideAllMessages()
        {
                 var messagesHeights = new Array(); // this array will store height for each

enter code here


        // This one runs just once for the first item in the array
                 var i = 0;
                 myMessages.each(function(element) {
                    alert(element);
                    messagesHeights[i] = $('.' + element).getHeight();
                    i++;
                   开发者_StackOverflow中文版 $$('.' + element + ' message').invoke('hide');
                 });


                 //This won't run at all===============================
                 for (var index = 0; index < myMessages.length; index++)
                 {
                        messagesHeights[index] = $('.' + myMessages[index]).getHeight();
                        $('x').hide(); 
                        //$('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport     
                 }
        }

---

I'm not a prototype user, but here's what I see so far:

$ is for IDs. I believe you need $$ here:

$$('.' + element)

This returns an Array, so I think you need invoke() like this:

$$('.' + element).invoke('getHeight');

Also, .each() passes the index as the second argument to the callback, so you don't need to maintain your own i.

myMessages.each(function(element, i) {

Also, this:

$$('.' + element + ' message')

...would seem to be looking for elements with the tag named message. I assume you want a class instead.

$$('.' + element + ' .message').invoke('hide');