Question

我在这里做了一个简化版本： http://jsfiddle.net/Y5zYy/

我正在尝试为列表的第n个可见项添加不同的css样式，因此当用户点击group2时，我希望该组的第三个项目变黑（这是4号），而目前第二项，即整个清单的第3项变为黑色。

以下是它的工作原理：当您单击每个组时，该组上的项目将添加一个类别“可见” 然后我希望javascript在每次点击后计算可见项目，并将一些样式添加到第n个可见项目，而不管整个列表中的数字。

HTML：

  <ul>
    <li class="g1">1</li>
    <li class="g1 g2">2</li>
    <li class="g1 g2">3</li>
    <li class="g1 g2">4</li>
    <li class="g1 g2">5</li>
    <li class="g1 g2">6</li>
    <li class="g1 g2">7</li>
    <li class="g1 g2">8</li>
    <li class="g1 g2">9</li>
    <li class="g1 g2 g3">10</li>
    <li class="g1 g2 g3">11</li>
</ul>
<a id="g1" href=#>Group1</a>
<a id="g2" href=#>Group2</a>
<a id="g3" href=#>Group3</a>

JS：

$(window).load(function(){


         $('li:nth-of-type(3)').css({
                                  "background-color":"#000",
                                   "font-weight":"bold",

      })



 $("li").addClass("visible");
$("a").click(function() {
             $("li").removeClass("visible");
             $('li').css({
                 "background-color":"red"
                                      })
               $(this).each(function() {
     $("." + $(this).attr('id')).addClass("visible");
   });
       if( $('li.visible').length > 3 ){
         $('li:nth-of-type(3)').css({
                                  "background-color":"#000",
                                   "font-weight":"bold",

      })
}
        });

});//]]>

Answer 1

如果您在隐藏其余元素后尝试定位组中的第3个<li>元素，那么您应该在jQuery中使用:eq()选择器：

$('li:eq(2)').css({
    "background-color": "#000",
    "font-weight": "bold"
});

eq（）从0开始，所以如果你想选择第3个<li>，你需要使用:eq(2)

如果您想切换元素的外观，我是否可以建议添加和删除类，这样可以在不需要时更轻松地重置为默认样式：

$('li.visible:eq(2)').addClass('highlighted');

CSS：

.highlighted {
    background-color: #000;
    font-weight: bold;
}

基于动态类的类型的第n个

HTML：

JS：

1 个答案: