Добавить div с классом "clearfix" после каждого второго div

@Dimka Mixov · Регистрация: 12.11.2013

Author24 — интернет-сервис помощи студентам

Доброго времени, уважаемые форумчане!

Делаю себе блог и возникла задача после каждого второго div добавлять div с классом "clearfix". Верстку делаю на bootstrap.

Сейчас посты выводятся в колонках, но они разной высоты и из за этого все едет.

Сейчас обычная вот такая разметка:

HTML5

<div class="row row-clear">
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
</div>

Как мне при помощи jQuery после каждого 2-ого div добавить еще один с классом "clearfix"? Т.е. чтобы получилось вот так:

HTML5

<div class="row row-clear">
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
<div class="clearfix"></div>
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
<div class="clearfix"></div>
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
<div class="col-sm-12 col-md-12 col-lg-6 top-20 bottom-20 col-clear">Тут посты</div>
<div class="clearfix"></div>
</div>

Нашел на просторах интернета такой скрипт, но он что то не корректно работает, а точнее не на каждой странице и не с каждой разметкой div'ов

Javascript

1
2
3

$('.row-clear .col-clear').each(function(i,e){
   (((i+1) % 3) == 0)
$(this).after('<div class="clearfix"></div>');

@j2FunOnly · 04.08.2020, 10:50

Javascript

1	$('.row .col-clear:nth-child(2n)').after('<div class="clearfix"></div>');

@Plastun20 · 04.08.2020, 12:49

Dimka Mixov, можно выбрать нечётные блоки

Javascript

1	$('.row div:odd ').after('<div class="clearfix"></div>');

@Dimka Mixov · 06.08.2020, 12:06 **[ТС]**

Приветствую! Ребят спасибо большое за подсказки, благодарю от души!
Первый и второй варианты отлично работают, буду использовать в дальнейшем.

Добавить div с классом "clearfix" после каждого второго div

Решение

Решение

@Dimka Mixov 17 / 15 / 2 Регистрация: 12.11.2013 Сообщений: 227
	06.08.2020, 12:06 [ТС]	4
	Приветствую! Ребят спасибо большое за подсказки, благодарю от души! Первый и второй варианты отлично работают, буду использовать в дальнейшем. 0