0

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

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

这是它的工作原理：当您单击每个组时，该组上的项目将添加一个类，说“可见”然后我希望 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",

      })
}
        });

});//]]>
4

1 回答 1

1

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

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

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

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

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

CSS：

.highlighted {
    background-color: #000;
    font-weight: bold;
}
于 2013-03-02T10:18:12.750 回答