jQuery选择器问题

Question

    <ul class="recom_htol">

      <li><i>0</i><a href="javascript:void(0);">内部会员管理系统</a><span>23</span></li>

      <li><i>0</i><a href="javascript:void(0);">内部会员管理系统</a><span>13</span></li>

      <li><i>0</i><a href="javascript:void(0);">内部会员管理系统</a><span>10</span></li>

    </ul>

    

    <ul class="recom_htol">

      <li><i>0</i><a href="javascript:void(0);">内部会员管理系统</a><span>23</span></li>

      <li><i>0</i><a href="javascript:void(0);">内部会员管理系统</a><span>13</span></li>

      <li><i>0</i><a href="javascript:void(0);">内部会员管理系统</a><span>10</span></li>

    </ul>

    

两个ul格式内容完全一样，现在要做的是把标签内的数字改成它的序列号，我是这样写的：

$(".recom_htol li").eq(0).find("i").text("1").css("color","#fe4b5f");

$(".recom_htol li").eq(1).find("i").text("2").css("color","#e66573");

$(".recom_htol li").eq(2).find("i").text("3").css("color","#b67179");

结果只改了前面一个，后面的ul里的li的index是3/4/5，我需要的都是1/2/3，而且每个123是要有相应的颜色。我如果要实现我的想法，该怎么处理这个呢