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

Question

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

因此，例如，我正在尝试获取名为“item”的特定类的每个第5个选择器。但是在分组中还有其他选择器称为“标题”，它会剔除第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;
}

我在这里放了一个完整示例代码的小提琴：https://jsfiddle.net/pb12gjp1/1/

在小提琴中，结果显示第四个“.item”实例，其中青色应用了第五个应用了它。 “.title”li甩掉了点数，因为它们被包含在第n个计数中。

有没有办法用jQuery解决它？我发现用CSS处理它的选项并不多。

非常感谢任何帮助。

Answer 1

您可以直接在li

上使用选择器

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

DEMO

<击>

抱歉，我错误地理解了您的问题，请使用.filter()和相关逻辑来解决您的问题。

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

DEMO

根据您的新要求，您必须使用.each()以及.nextUntil()和.filter()来实现您的目标。

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

DEMO

Answer 2

最有可能的是，您的标记在语义上是不正确的。

相反，我会使用:nth-child或:nth-of-type

的嵌套列表

＆＃13;

＆＃13;

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

＆＃13;

<ul>
  <li>Title
    <ul>
      <li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
      <li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
    </ul>
  </li>
  <li>Title
    <ul>
      <li>Item</li><li>Item</li>
    </ul>
  </li>
  <li>Title
    <ul>
      <li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;