jQuery nth-child nth-of-type Not Working

Question

我需要在x个元素之后插入一个clearfix div，以便我可以获得格式良好的列。

我已经尝试了:nth-child和:nth-of-type，我只在前x个项目后添加了一个div。

$('#content .product-layout:nth-child(3)').after('<div class="clearfix visible-lg"></div>');

在第三个.product-layout div之后创建一个div。

$('#product-row div:nth-child(3)').after('<div class="clearfix visible-lg"></div>');

在第三个.product-layout div之后创建一个div。

我需要在每个第3个现有产品布局div之后创建div。

我到底做错了什么？

Answer 1

您需要使用3n作为重复元素列表，:nth-child(3)仅选择第3个孩子，其中:nth-child(3n)将选择3个，6个，9个等等

$('#product-row div:nth-child(3n)').after('<div class="clearfix visible-lg"></div>');

演示：Fiddle

• :nth-child

Answer 2

您错过了n以选择product-layout的{​​{1}}个班级的每个第三个子元素：

#content