请教jquery循环每个ico的问题

html代码:
<dl>
   <dt><a><i class="clIco"></i>服装鞋帽</a></dt>
   <dd>
      <a>女装</a>
      <a>男装</a>
      <a>童装</a>
      <a>运动品牌</a>
   </dd>
</dl>
<dl>
   <dt><a><i class="itIco"></i>电脑办公</a></dt>
   <dd>
      <a>女装</a>
      <a>男装</a>
      <a>童装</a>
      <a>运动品牌</a>
   </dd>
</dl>
.....

css代码：
.clIco{ width:9px; height:5px; background:url(../images/clIco.png) no-repeat;}
.clIcoCur{ background:url(../images/clIcoCur.png) no-repeat;}
.itIco{ width:9px; height:5px; background:url(../images/itIco.png) no-repeat;}
.itIcoCur{ background:url(../images/itIcoCur.png) no-repeat;}

jquery代码怎么写，需要的效果是鼠标移到相应的dl上时其对应的Ico变成相应的IcoCur,比如第一个dl的图标是clIco（服装鞋帽的），当鼠标移到服装鞋帽的dl时，clIco的class变成clIcoCur，移出反之。第二的图标是itIco(电脑办公)，当鼠标移到电脑办公的dl时，itIco的class变成itIcoCur，移出反之。具体怎么操作，请指点下
------解决方案--------------------

$(".clIco").parent().parent().parent().hover(function(){

    $(this).find(".clIco").removeClass("clIco").addClass("clIcoCur");

},function(){

    $(this).find(".clIcoCur").removeClass("clIcoCur").addClass("clIco");

});



$(".itIco").parent().parent().parent().hover(function(){

    $(this).find(".itIco").removeClass("itIco").addClass("itIcoCur");

},function(){

    $(this).find(".itIcoCur").removeClass("itIcoCur").addClass("itIco");

});

------解决方案--------------------

$('dl').each(function(i){

	$(this).hover(function(){

		$('i',this).removeClass().toggleClass(function(){

			return 'ico-' + i;

		});

	},function(){

		$('i',this).removeClass().toggleClass(function(){

			return 'ico' + i;

		});

	});

});

不过需要修改 class。默认的 class 为 ico0，ico1...
鼠标移入 class 改为 ico-0，ico-1......