javascript - jQuery选择器问题

问题描述

问 题

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

解决方案

(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]});
        });
    });
})()

这篇关于javascript - jQuery选择器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！