jQuery nth-child nth-of-type Not Working

本文关键字：Working Not nth-of-type nth-child jQuery 更新时间：2023-09-26

我需要在x个元素之后插入一个clearfixdiv，这样我就可以得到很好的格式化列。

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

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

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

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

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

我需要在每个现有的第3个product-layoutdiv之后创建div。

我到底做错了什么?

您缺少n以选择#content的product-layout类的每第三个子元素:

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

您需要使用3n用于重复元素列表，:nth-child(3)只选择第三个子元素，而:nth-child(3n)将选择3,6,9…等

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

演示:小提琴