jQuery替代支持类的nth-child选择器
我有这样的结构：
... Item 1 Item 2 Item 3 ... Item 4 Item 5 Item 6 Item 7 ... ... Another item 1 Another item 2 ... Another item 3 ... 我只需要选择.parent div的第n个.item div class子（计数器为每个父节点重置）。
例如，我想选择每三个“div.item”元素，所以我期望影响内容为“ Item 3 ”，“ Item 6 ”，“ Another item 3 ”的元素。
规则：
- 期望的类总是应用于“div”元素（可能并不重要）。
- 父母总是“父母”阶级，也总是“div”元素。
- 在div中，可以存在具有随机类名（或不具有）的其他div（或任何其他类型的元素），并且这些div不得干扰第n个计数器。
- 元素也可以嵌套，因此每个项类元素可以另外包含另一个父类元素，并且还包含另一个项类元素。
不幸的CSS选择器 ：
div.parent div.item:nth-child(3n)
与nth-child（）无法正常工作。 尽管效果仅应用于具有给定类的元素，但计数本身并不正确，因为它还会计算没有给定类的元素。
我怀疑会有纯CSS解决方案，也因为我实际上将它用作jQuery选择器，我想要一些简单的jQuery替代方案。 谢谢你们给我任何帮助。
您可以根据父项中具有相同类别的其他项目的索引过滤项目
$('.item').filter(function(_,item) { return ($(item).siblings('.item').addBack().index(item)+1) % 3 === 0; }).css('color','red');
... Item 1 Item 2 Item 3 ... Item 4 Item 5 Item 6 Item 7 ... ... Another item 1 Another item 2 ... Another item 3 ...
如果你想要一些jQuery集合的nth元素，你需要在该集合上使用.eq()选择器。 如…
var allItems = $('.parent').find('.item'); for (i = 1; i <= allItems.length/3; i++) { allItems.eq((i*3)-1).css({'border':'1px solid red'}) }
... Item 1 Item 2 Item 3 ... Item 4 Item 5 Item 6 Item 7 ... ... Another item 1 Another item 2 ... Another item 3 ...
我怀疑会有纯CSS解决方案
对于纯css解决方案，您可以使用General siblings combinator选择器~ 。
由两个序列表示的元素在文档树中共享相同的父元素，并且由第一序列表示的元素在由第二个序列表示的元素之前（不一定是直接）。
使用两个选择器。 在第一个选择器，匹配所需的元素。 在第一个选择器后面的第二个选择器匹配元素处，为在第一个匹配元素处设置的属性设置默认值或使用unset 。
/* match third `div.item` */ .parent div.item ~ div.item ~ div.item { color: sienna; font-size: 2em; } /* match fourth through last `div.item` */ .parent div.item ~ div.item ~ div.item ~ div.item { color: unset; font-size: unset; }
... Item 1 Item 2 Item 3 ... Item 4 Item 5 Item 6 Item 7 ... ... Another item 1 Another item 2 ... Another item 3 Another item 4 Another item 5 ...
nth-child选择器不是类敏感的。 它按名称而不是按类选择元素。 见jquery nth-child
：nth-child（n）伪类很容易与：eq（n）混淆，即使这两者可能导致显着不同的匹配元素。 使用：nth-child（n），所有子节点都被计数，无论它们是什么，只有在与附加到伪类的选择器匹配时才选择指定的元素。 使用：eq（n）仅计算附加到伪类的选择器，不限于任何其他元素的子节点，并且选择第（n + 1）个（n为0）。
虽然eq（n）是类敏感的，但它不支持方程作为参数。
所以我认为没有直接的方法来使用css来实现它。
尝试使用一些js代码。
纯CSS选择器无法实现这一点。 但是，如果您可以灵活地使用唯一标记名称而不是div.item，则可以实现这一点。 如果您可以将div.item元素更改为ap标记，那么您可以执行此操作。
.parent p:nth-of-type(3n) { color: red; } .parent { padding: 10px; border: 1px solid black; } .item { border: 1px dotted black; }
Random Item 1
Item 2
Item 3
Random different Name Item 4
Item 5
Item 6
Item 7
Another Random Another item 1
Another item 2
Random Text Another item 3