每4个节后追加div，如果还有剩余节则在末尾追加

Posted 2021-04-30

我正在尝试在每4个部分之后添加一个div，如果有剩余，请在最后添加一个div。所以看起来像这样：

<section></section>
<section></section>
<section></section>
<section></section>
<div></div>
<section></section>
<section></section>
<section></section>
<section></section>
<div></div>
<section></section>
<section></section>
<div></div>

我知道此代码在第四个代码之后执行：

$("section:nth-child(4n)").after("<div></div>");

但是我不确定如何为其余部分添加它。我考虑过添加带有if的计数系统...我不太擅长编码，因此不胜感激。

我正在尝试在每4个部分之后添加一个div，如果有剩余，请在最后添加一个div。所以看起来像这样：

答案

您还可以扩展选择器以将最后一个元素包含在$("section:nth-child(4n), section:last").after("<div></div>");中。

另一答案

使用容器元素作为选择上下文，检查最后一个子元素的类型是否为section：

另一答案

计算部分总数，mod 4，如果还有剩余，则在最后一部分之后添加div