Как добавить элемент DIV после каждого второго и третьего элемента при разном разрешении?

Question

[MFNIK]

Добрый день! Помогите реализовать задачу!

Существует разметка с разной высоты контентом в колонках

<div class="row home-menu ">
          <div class="col-md-4 col-sm-6"></div>
          <div class="col-md-4 col-sm-6"></div>
          <div class="col-md-4 col-sm-6"></div>
          <div class="col-md-4 col-sm-6"></div>
          <div class="col-md-4 col-sm-6"></div>
          <div class="col-md-4 col-sm-6"></div>
          <div class="col-md-4 col-sm-6"></div>
          <div class="col-md-4 col-sm-6"></div>
          <div class="col-md-4 col-sm-6"></div>
        </div>

Необходимо что бы при разрешении (col-md-4) 992 px и выше элемент <div class="clearfix"></div> добавлялся после каждого третьего элемента div.
При разрешении от (col-sm-6) 991 px и ниже, переместить элемент <div class="clearfix"></div> после второго элемента DIV , а после третьего удалить!

Думал решить классом hidden, не работает, display: none, но clearfix все равно срабатывает.

Вот код который есть

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

Пробывал так:

$('.home-menu div').each(function(i,e){
        if (((i+1) % 3) == 0)
    $(this).after('<div class="clearfix hidden-sm hidden-xs"></div>');
       else  (((i+1) % 2) == 0)
    $(this).after('<div class="clearfix hidden-md hidden-lg hidden-xs"></div>');

Все добавляет но hidden не работает....

Может кто нибудь напишет код JS при разных разрешениях?

Comments

[Neyury]

зачем вам это извращение?

[MFNIK]

А как решить сдвиги колонок?

[kulaeff]

Оффтопик: а может ну его, этот бутстрап?

[MFNIK]

Answer 1

[Сергей delphinpro]

Не страдайте ерундой.

.home-menu > :nth-child(2n+1) { clear: left; }

@media (min-width: 992px) {
  .home-menu > :nth-child(2n+1) { clear: none; }
  .home-menu > :nth-child(3n+1) { clear: left; }
}

Answer 2

[Виктор Таран]

все это делается уже на движке, средствами php
и вместо клеар фикс можно использовать кол-12-разрешение.
Тогда не нужно будет рисовать медийки.
И есть куда более простое решение
http://defile.ru/catalog

Comments

[MFNIK]

Да это можно сделать, но будет не красиво, хочется сделать типо https://learn.javascript.ru/ - дополнительно. Когда использовать кол-12 при большом разрешении все сдвигается влево, много пустого места.

[Виктор Таран]

ээ немного не понял что и куда сдвигается ?

[MFNIK]

Ну вы имеете ввиду сделать разметку так (див класс="кол-лг-4 кол-мд-4 кол-см-12 кол-хс-12), вот при кол-см-12 получается что все в одну колонку, но разрешение экрана большое много пустого места. У меня сейчас разметка (див класс="кол-лг-4 кол-мд-6 кол-см-12 кол-хс-12)

[MFNIK]

У меня сейчас разметка (див класс="кол-лг-4 кол-мд-4 кол-см-6 кол-хс-12) ой простите вот так!

[MFNIK]

Спасибо помогло, минус один JS запрос!

Answer 3

[Егор Живагин]

Стоп. Бутстрап. Зачем clearfix ? Может я чего не догоняю, но у тебя и так на разрешении sm - 2 элемента в ряд, на md - 3 элемента

.home-menu {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: space-between;
flex-wrap: wrap;
}

Comments

[MFNIK]

При md -4 --- три элемента в ряд, при sm-6 --- два элемента в ряд.

[MFNIK]

Вот что получается смотрите картинку ниже

[Егор Живагин]

MFNIK: это... ненормально. Пример бы на codepen или jsfiddle

[Егор Живагин]

MFNIK: bootstrap 3 ? Отвык от него, привык к 4 ) Сделайте контейнер флексбоксом и будет счастье

[MFNIK]

Егор Живагин: а как написать jsfiddle у меня бутстрап, копировать весь движок туда что ли и стили? Я правда ни когда не пользовался, но посмотрел там вроде нет настроек бустрапа. Ну уже начал на бустрапе, и не разу не слышал про флексбокс

[Егор Живагин]

MFNIK: в bootstrap 4 сетка на них. Загугли display: flex. Стили примерные для этого случая сейчас в ответе напишу

[Егор Живагин]

MFNIK: написал. Должно помочь. Все отступы, если что, регулируются вручную

Answer 4

[iBird Rose]

<div class="row home-menu ">
          <div class="col-md-4 col-sm-6"></div>
          <div class="col-md-4 col-sm-6"></div>
		  <div class="clearfix visible-sm"></div> //через каждые 2
          <div class="col-md-4 col-sm-6"></div>
		  <div class="clearfix visible-md visible-lg"></div> //через каждые 3
          <div class="col-md-4 col-sm-6"></div>
		  <div class="clearfix visible-sm"></div>
          <div class="col-md-4 col-sm-6"></div>
          <div class="col-md-4 col-sm-6"></div>
		  <div class="clearfix visible-sm"></div>
		  <div class="clearfix visible-md visible-lg"></div>
          <div class="col-md-4 col-sm-6"></div>
          <div class="col-md-4 col-sm-6"></div>
		  <div class="clearfix visible-sm"></div>
          <div class="col-md-4 col-sm-6"></div>
		  <div class="clearfix visible-md visible-lg"></div>
        </div>

Comments

[MFNIK]

Спасибо но это меню MODX оно динамическое с помощью pdoMenu. Шаблон [[+wrapper]], ни как не реализовать. Плюс не работает hidden и visible почему то! Все равно скидывает. Но все равно спасибо!

[MFNIK]

Шаблон <div class="col-md-4 col-sm-6">[[+wrapper]]</div>

[iBird Rose]

MFNIK: я не знаю modx, но на php это делается примерно так:

$max = 10; 
$i=0; 
while($i != $max ){ 
echo '<div class="col-md-4 col-sm-6">[[+wrapper]]</div>'; 
if($i%2 == 0){ 
echo '<div class="clearfix visible-sm"></div>'; 
} 
if($i%3 == 0){ 
echo '<div class="clearfix visible-md visible-lg"></div>'; 
} 
$i++; 
}