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

我在这里做了一个简化版本：

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

以下是它的工作原理： 当您单击每个组时，该组上的项目将添加一个类，称为“可见” 然后，我希望javascript在每次单击后计算可见项的数量，并向第n个可见项添加一些样式，而不考虑其在整个列表中的编号

HTML:

---

如果在隐藏其余元素后试图将第三个

元素作为目标，则应使用jQuery中的

:eq（）

选择器：

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

eq（）从0开始，因此如果要选择第三个

，则需要使用

：eq（2）

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

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

CSS:

---

谢谢你的回答，但是我没有得到它，我仍然用eq选择器突出显示了错误的元素。它应该是

$（'li.visible:eq（2）'）。addClass（'highteded'）

？您只想计算可见项目。好的，谢谢，这似乎可行，但有一个问题，如果组中正好包含3个项目，则第三个项目不会突出显示，这是小提琴，请尝试单击组3：这是因为此条件语句-

if（$（'li.visible'）。长度>3）

您应该将其设置为

>2

。记住JS从0开始计数。

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

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

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