Добавление div после каждых 4 разделов и в конце, если остаются какие-либо разделы

Question

Я пытаюсь добавить div после каждых 4 разделов и в конце, если есть еще.Таким образом, это выглядит примерно так:

<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 ... Я не очень хорош в кодировании, поэтому я буду благодарен за любые объяснения.

Answer 1

Вы также можете расширить селектор, чтобы включить последний элемент с $("section:nth-child(4n), section:last").after("<div></div>");.

Answer 2

Вы можете проверить, есть ли div после последнего раздела.Если нет, добавьте новый.Вот код

$("section:nth-child(4n)").after("<div></div>");
if (!$("section:last").next().is('div')) {
    $("section:last").after("<div></div>");
}

$ ("section: last") выбирает последний раздел, а затем метод next () выбирает следующий элемент и затем проверяет, является ли он элементом div.Если это не так, добавляет div после последнего раздела.Надеюсь, это поможет.

Answer 3

Подсчитайте общее количество разделов, мод 4 и, если есть остаток, добавьте div после последнего раздела

var div = $('<div>');
var sectionsLen = $('section').length;
if(sectionsLen % 4 !== 0) {
   $('#box').children().last().append(div);
}

Answer 4

Используя элемент контейнера для контекста выбора, проверьте, является ли тип последнего дочернего элемента section:

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

if ($('#box').children().last().is('section')) {
    $('#box').append("<div></div>");
}

Fiddle demo