javascript - 支持类的 nth-child 选择器的 jQuery 替代方案

Question

我有这样的结构:

<div class="parent">
    <div class="randomclass">...</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="randomclassdifferentname">...</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    ...
</div>
<div class="parent">
    <div class="anotherclass">...</div>
    <div class="item">Another item 1</div>
    <div class="item">Another item 2</div>
    <div>...</div>
    <div class="item">Another item 3</div>
    ...
</div>

我只需要选择 .parent div 的第 n 个 .item div 子类(每个父节点的计数器重置)。

例如，我想选择每一个第三个“div.item”元素，所以我希望影响内容为“Item 3”、“”的元素元素 6", "另一个元素 3"。

规则:

• 所需的类总是应用于“div”元素(可能不重要)。
• parent 总是“父”类，也总是“div”元素。
• 在 div 中可以有其他带有随机类名(或没有)的 div(或任何其他类型的元素)，并且这些不能干扰第 n 个计数器。
• 元素也可以嵌套，因此每个元素类元素还可以包含另一个父类元素，然后再包含另一个元素类元素。

不幸的是 CSS 选择器:

div.parent div.item:nth-child(3n)

with nth-child() 无法正常工作。尽管效果仅适用于具有给定类的元素，但计数本身是不正确的，因为它也计算没有给定类的元素。

因为我怀疑是否会有纯 CSS 解决方案，而且因为我实际上将其用作 jQuery 选择器，所以我想要一些简单的 jQuery 替代方案。谢谢你们能给我的任何帮助。

Answer 1

您可以根据元素在父级中的索引过滤元素，与其他具有相同类别的元素相关

$('.item').filter(function(_,item) {
    return ($(item).siblings('.item').addBack().index(item)+1) % 3 === 0;
}).css('color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
    <div class="randomclass">...</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="randomclassdifferentname">...</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    ...
</div>
<div class="parent">
    <div class="anotherclass">...</div>
    <div class="item">Another item 1</div>
    <div class="item">Another item 2</div>
    <div>...</div>
    <div class="item">Another item 3</div>
    ...
</div>