JavaScript loops

I have the following code that I want to slim down.

    $('#1').hover(function() { $('#hiddenMenu1').css('display', 'block'); },
            function() { $('#hiddenMenu1').css('display', 'none'); });
    $('#2').hover(function() { $('#hiddenMenu2').css('display', 'block'); },
            function() { $('#hiddenMenu2').css('display', 'none'); });
    $('#3').hover(function() { $('#hiddenMenu3').css('display', 'block'); },
            function() { $('#hiddenMenu3').css('display', 'none'); });
    $('#4').hover(function() { $('#hiddenMenu4').css('display', 'block'); },
            function() { $('#hiddenMenu4').css('display', 'none'); });
    $('#5').hover(function() { $('#hiddenMenu5').css('display', 'block'); },
            function() { $('#hiddenMenu5').css('display', 'none'); });
    $('#6').hover(function() { $('#hiddenMenu6').css('display', 'block'); },
            function() { $('#hiddenMenu6').css('display', 'none'); });
    $('#7').hover(function() { $('#hiddenMenu7').css('display', 'block'); },
            function() { $('#hiddenMenu7').css('display', 'none'); });
    $('#8').hover(function() { $('#hiddenMenu8').css('display', 'block'); },
            function() { $('#hiddenMenu8开发者_如何转开发').css('display', 'none'); });
    $('#9').hover(function() { $('#hiddenMenu9').css('display', 'block'); },
            function() { $('#hiddenMenu9').css('display', 'none'); });
    $('#10').hover(function() { $('#hiddenMenu10').css('display', 'block'); },
            function() { $('#hiddenMenu10').css('display', 'none'); });

I've tried this, but it doesn't work. EDIT: This doesn't error, just nothing happens.

    for (i = 1; i <= 10; i++) {
        var id = '#' + i.toString();
        var menu = '#hiddenMenu' + i.toString();
        $(id).hover(function() { $(menu).css('display', 'block'); },
                function() { $(menu).css('display', 'none'); });
    }

Thanks in advance

EDIT: HTML

<div id="ctl00_divMenu" class="dynamicMenu">
    <ul class="siteNav">
        <li id="1"></li>
        <li id="2"></li>
        <li id="3"></li>
        <li id="4"></li>
        <li id="5"></li>
        <li id="6"></li>
        <li id="7"></li>
        <li id="8"></li>
        <li id="9"></li>
        <li id="10"></li>
    </ul>
    <div id="hiddenMenu1" class="hiddenMenu">
        <div class="list">...</div>
    </div>
    <div id="hiddenMenu2" class="hiddenMenu">
        <div class="list">...</div>
    </div>
    <div id="hiddenMenu3" class="hiddenMenu">
        <div class="list">...</div>
    </div>
    ...
    <div id="hiddenMenu10" class="hiddenMenu">...</div>
</div>

I'd give them a common class then bind them all at once.

$('.commonClass').hover(function(e) {
   $('#hiddenMenu' + this.id).toggle(e.type === 'mouseenter');
}):

If I knew the HTML structure then it could be optimized further (event delegation, tranversing, etc)

EDIT: New code (using event delegation) since you've given us the HTML structure -

$('.siteNav').delegate('mouseenter mouseleave', 'li', function(e) {
  $('#hiddenMenu' + this.id).toggle(e.type === 'mouseenter');
});

Your code is not working because you created closures in the for loop (hover functions are executed later and when that happens they are accessing outer function i variable which is always equal 10 (the loop finished executing)).

more explanation here: http://jibbering.com/faq/notes/closures/

What you can do is trap the value of i inside of another function that will call hover:

for (i = 1; i <= 10; i++) {
    (function(num) {
        var id = '#' + num;
        var menu = '#hiddenMenu' + num;
        $(id).hover(function() {
            $(menu).css('display', 'block');
        }, function() {
            $(menu).css('display', 'none');
        })
    })(i.toString());
}

You can also simply do this:

$('#1,#2,#3,#4,#5,#6,#7,#8,#9,#10').hover(function() { 
    $('#hiddenMenu'+$(this).attr('id')).css('display', 'block');
},function() { 
    $('#hiddenMenu'+$(this).attr('id')).css('display', 'none'); 
});

or (after your update):

$('ul.siteNav li').hover(function() { 
        $('#hiddenMenu'+$(this).attr('id')).css('display', 'block');
    },function() { 
        $('#hiddenMenu'+$(this).attr('id')).css('display', 'none'); 
    });

Something like this should work.

$('#1, #2, #3, #4, #5, #6, #7, #8, #9, #10').hover(
    function() { 
        $('#hiddenMenu' + this.id).show(); 
    },
    function() { 
        $('#hiddenMenu' + this.id).hide(); 
    }
);