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是要有相应的颜色。我如果要实现我的想法，该怎么处理这个呢

Answer 1

(function(){
    // jquery 1.8.3 我用的测试，lis是能获取的所有 ,recom_htol li的
    var lis = $(".recom_htol li");
    [].forEach.call(lis, function(e,i){
        $(e).find('i').text(i+1);
    });
})()

$(".recom_htol li")选择器已经获取到了所有li，下一步只需要遍历这个类数组，然后把对应的index处理完加进对应的i标签里面即可

更新

(把颜色也加上了，题主的颜色看着不明显，我随便用颜色了)

如果是只要123，那就取余运算咯~

(function(){
    var col = ["blue", "green", "red"];
    var lis = $(".recom_htol li");
    [].forEach.call(lis, function(e,i){
        var index = i%3;
        $(e).find('i').text(index+1).css({color:col[index]});
    });
})()

再更新

如果主要是要每个ul的重新编号，可以考虑用遍历的时候获取其当前的父元素后再查找自己的li到底的序号，不过这样感觉性能不好，每一项都要重新获取一次父元素，再去find li再去获取index。

(function(){
    var col = ["blue", "green", "red",'yellow','pink'];
    var lis = $(".recom_htol li");
    [].forEach.call(lis, function(e,i){
        var thisDom = $(e);
        var parent = thisDom.parent('ul');
        var index = parent.find('li').index(e);
        $(e).find('i').text(index+1).css({color:col[index]});
    });
})()

我觉得倒不如楼下有人回复的那种， 从ul入手，遍历ul，每个ul再遍历自己的li们，再逐个赋值，就不会有序号需要重新编号的需求了，反正写了这么多了，我就再写写~

(function(){
    var col = ["blue", "green", "red",'yellow','pink'];
    var ul = $(".recom_htol");
    ul.each(function(){
        var lis = $(this).find('li');
        lis.each(function(index){
            $(this).find('i').text(index+1).css({color:col[index]});
        });
    });
})()

Answer 2

var colors = ["#fe4b5f", "#e66573", "#b67179"];
$(".recom_htol").each(function (__, recomHtol) {
  $(recomHtol).find("i").each(function (i, recomHtolIndex) {
    $(recomHtolIndex).text(i + 1).css("color", colors[i]);
  });
});

Answer 3

$(".recom_htol li").each(function(index){
    $(this).children("i").text(index + 1)
})

Answer 4

$(".recom_htol li")这个选择器说的是 只要是 class为recom_htol的后代元素li都选择中
所以你可以打印出来看这个选择器到底选择中了哪些元素

不墨迹了 写一个解决方法吧
$('.recom_htol:eq(0) li').eq(0).find("i").text("1").css("color","#fe4b5f")

Answer 5

按你的思路应该写成这样：

var $ul = $(".recom_htol");
$ul.eq(0).find("li").eq(0).find("i").text("1").css("color","#fe4b5f");
$ul.eq(1).find("li").eq(0).find("i").text("1").css("color","#fe4b5f");
$ul.eq(0).find("li").eq(1).find("i").text("2").css("color","#e66573");
$ul.eq(1).find("li").eq(1).find("i").text("2").css("color","#e66573");
$ul.eq(0).find("li").eq(2).find("i").text("3").css("color","#b67179");
$ul.eq(1).find("li").eq(2).find("i").text("3").css("color","#b67179");