jQuery每隔四个元素，除非最后一个答案

【问题标题】：jQuery every fourth element unless lastjQuery每隔四个元素，除非最后一个
【发布时间】：2014-03-23 11:14:19
【问题描述】：

我正在尝试在每四个元素之后添加一个“标题”元素，我一直在使用它，效果很好。

$('.each-work:nth-of-type(4n)').each(function() {
    $(this).after('<div class="each-work each-works-caption"><ul></ul></div>');
});

唯一的原因是元素的数量不能被 4 整除，而且它是一个添加元素的 CMS，因此元素的数量可以定期增加/减少。如何编辑此函数以包含 4n 之外的剩余元素？

例如，目前它看起来像这样：

<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work each-works-caption"><ul></ul></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work each-works-caption"><ul></ul></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work each-works-caption"><ul></ul></div>
<div class="each-work"></div>
<div class="each-work"></div>

而我最喜欢的是：

<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work each-works-caption"><ul></ul></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work each-works-caption"><ul></ul></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work each-works-caption"><ul></ul></div>
<div class="each-work"></div>
<div class="each-work"></div>
<div class="each-work each-works-caption"><ul></ul></div>

谢谢回复

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

除了选择每第 4 个孩子之外，还要选择最后一个孩子：

$('.each-work:nth-of-type(4n), .each-work:last-of-type').each(function() {
    $(this).after('<div class="each-work each-works-caption"><ul></ul></div>');
});

JSFiddle

【讨论】：

如果最后一个子元素可以被 4 整除，那么附加的元素就是重复的。
我强烈建议使用:nth-of-type(4n) 和:last-of-type，或:nth-child(4n) 和:last-child，具体取决于原始结构。
或者你可以简单地使用$('.each-work:nth-of-type(4n), .each-work:last-of-type').after('<div class="each-work each-works-caption"><ul></ul></div>');like this

【解决方案2】：

试试：

function addNewDiv() {
    $(this).after('<div class="each-work each-works-caption"><ul></ul></div>');
}

$('.each-work')
    .filter(':nth-of-type(4n)')
        .each(addNewDiv)
        .end()
    .last()
        .each(addNewDiv);

【讨论】：