Agregar div después de cada 4 secciones y al final si queda alguna sección

Question

Estoy tratando de agregar un div después de cada 4 secciones y al final si quedan algunas. Entonces se parece a esto:

<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>

Sé que este código lo hace después de cada 4to:

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

Pero no estoy seguro de cómo agregarlo para el resto. Pensé en agregar un sistema de conteo con un if ... No soy muy bueno en la codificación, así que agradecería cualquier explicación.

jquery html count append

1

Melissa Ginoza 26 sep. 2019 a las 20:10

Answer 1

También puede extender el selector para incluir el último elemento con $("section:nth-child(4n), section:last").after("<div></div>");.

2

vqf 26 sep. 2019 a las 17:29

Answer 2

Cuente el número total de secciones, mod 4 y si hay un resto, agregue el div después de la última sección

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

1

devlin carnate 26 sep. 2019 a las 17:29

Answer 3

Usando un elemento contenedor para el contexto de selección, verifique si el tipo del último elemento hijo es section:

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

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

Demo de violín

1

isherwood 26 sep. 2019 a las 17:28

Agregar div después de cada 4 secciones y al final si queda alguna sección

3 respuestas

Nuevas preguntas

jquery