Jquery 当存在其他选择器/类时，如何确定类的第n个

我发现，当同一个分组中存在另一个类或选择器时，很难确定类的第n个

举个例子，我试图获取一个名为“item”的特定类的每5个选择器。但是，在分组中还有其他名为“title”的选择器，它们去掉了第n个计数

<ul>
    <li class="title">Title</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="title">Title</li>
    <li class="item">Item</li>
    <li class="title">Title</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    ...
</ul>

.item {
    background-color: red;
}

.item:nth-child(5n+5) {
    background-color: cyan;
}

标题
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
标题
项目
标题
项目
项目
项目
...

.项目{
背景色：红色；
}
.项目：第n个子项（5n+5）{
背景色：青色；
}

我在这里展示了完整的示例代码：

在小提琴中，结果显示了第四个“.item”实例应用了青色verus，第五个实例应用了青色verus。“.title”李的计数已包含在第n个计数中，因此他放弃了计数

<ul>
    <li class="title">Title</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="title">Title</li>
    <li class="item">Item</li>
    <li class="title">Title</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    ...
</ul>

.item {
    background-color: red;
}

.item:nth-child(5n+5) {
    background-color: cyan;
}

有没有办法用jQuery解决这个问题？我发现仅仅用CSS处理它的选项不多

非常感谢您的帮助。

您可以在

li

ul li:nth-child(5n+5) {
    background-color: cyan;
}

抱歉，我错误地理解了您的问题，请使用带有相关逻辑的

.filter（）

来解决您的问题

var items = $(".item");
items.filter(function(i){
  return i % 5 == 4;
}).css("background-color","cyan");
//or you can add a class here.

---

根据您的新要求，您必须使用

.each（）

以及

.nextUntil（）

和

.filter（）

来实现您想要的功能

var titles = $(".title");
titles.each(function(i){
  $(this).nextUntil(".title").filter(function(i){
   return i % 5 == 4;
  }).css("background-color","cyan");
});

---

很可能，您的标记在语义上不正确

相反，我将使用带有

：n个child

或

：n个类型的嵌套列表


ul>li>ul>：第n个孩子（5n+5）{
背景色：青色；
}

头衔

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目


头衔

项目
项目


头衔

项目
项目
项目
项目
项目


那里的结果和我的一样。第四个“.item”应用了青色背景，而第五个应用了青色背景。我认为过滤是个好主意。但是最后一个“.title”类却忽略了最后的计数。您可以看到，它会影响它前面的“.item”。更改了此处的标题以使其更加突出：@RyanPalmer，您想在
之后选择第五个
项目吗？对,对。但列表中标题和项目的顺序和数量因页面而异。这些内容都是根据用户的输入被转储到页面中的，所以它们的顺序和数量永远不会完全相同。@RyanPalmer我希望，新的编辑内容能满足您的要求。