What is a better way to write this Javascript hover function?
<p>This works but of course is a bit redundant. Items can also be dynamically added so I need to have it always increment by one. What is a better way to write this into one function?</p>

<p>Update: Just added the markup. Bascially when a user hovers any of the list item a classname should be attached to the banner div. e.g., banner_0, banner_1, etc.</p>

<pre><code>&lt;ul id="list"&gt;
    &lt;li&gt;&lt;a href="#" data=""&gt;item1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" data=""&gt;item2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" data=""&gt;item3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" data=""&gt;item4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" data=""&gt;item5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" data=""&gt;item6&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" data=""&gt;item7&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="banner" class=""&gt;&lt;/div&gt;


$('#list a').eq(0).hover(
function() {
    $('#banner').addClass('banner_0');
}, 
function() {
    $('#banner').removeClass();
}
);

$('#list a').eq(1).hover(
function() {
    $('#banner').addClass('banner_1');
}, 
function() {
    $('#banner').removeClass();
}
);

$('#list a').eq(2).hover(
function() {
    $('#banner').addClass('banner_2');
}, 
function() {
    $('#banner').removeClass();
}
);

$('#list a').eq(3).hover(
function() {
    $('#banner').addClass('banner_3');
}, 
function() {
    $('#banner').removeClass();
}
);
</code></pre>
