新手求助，谢谢帮忙！

<style>
.n1 {}
.n2 {}
.n3 {}
.n4 {}
</style>
<div id="nav">
<div id="nav1" class="button"></div>
<div id="nav2" class="button"></div>
<div id="nav3" class="button"></div>
<div id="nav4" class="button"></div>
</div>
我想实现鼠标移到各button上，给相应的nav1-nav4添加.n1-.n4的样式，请问应该怎么做
$(document).ready(function() {
   $('nav .button').hover(function() {
      .....
   }, function(){
      .....
   });
})
高手帮忙，在线等，谢谢了。

$(document).ready(function() {
    $('#nav .button').hover(function(i) {
        if($(this).is('#nav1')) $(this).addClass("n1")    
        if($(this).is('#nav2')) $(this).addClass("n2")
        if($(this).is('#nav3')) $(this).addClass("n3")
        if($(this).is('#nav4')) $(this).addClass("n4")
    }, function() {
        if($(this).is('#nav1')) $(this).removeClass('n1');    
        if($(this).is('#nav2')) $(this).removeClass('n2');
        if($(this).is('#nav3')) $(this).removeClass('n3');
        if($(this).is('#nav4')) $(this).removeClass('n4');
    })
});
这种做法也可以，但是很笨吧？有没有简单点的方法？

$('#nav .button').hover(function() {
  var num = this.id[3];
  $(this).addClass("n" + num);
},

差不多就这样

请问楼上的大哥，这是什么意思啊？不太明白，放上去不管用啊。

噢，明天了，谢谢三楼大哥提供思路。这样解决的。
$('#nav .button').hover(function() {
    $(this).addClass(this.id.replace('av',''));
},function() {
    $(this).removeClass(this.id.replace('av',''));
});

$('#nav .button').each(function(i){
    $(this).mouseover(function(){
        var m = i+1;
        $(this).addClass("n" + m);
    });
});

这样应该也行吧？共同进步