Как случайным образом добавлять элементы?

Question

[kamisarlapsha]

Привет! Необходимо случайным образом добавлять 3 (#banner-0, #banner-1, #banner-2) элемента после 30-го, 60-го и 90-го <div>.

Вот такая структура должна получиться

<div class="products--grid">
     <div class="product-layout"></div>
     <div class="product-layout"></div>
     <div class="product-layout"><!-- К примеру это 30-й product-layout --></div>
<div id="banner-0"></div>
     <div class="product-layout"></div>
     <div class="product-layout"><!-- К примеру это 60-й product-layout --></div>
<div id="banner-2"></div>
     <div class="product-layout"></div>
     <div class="product-layout"><!-- К примеру это 90-й product-layout--></div>
<div id="banner-1"></div>
     <div class="product-layout"></div>
     <div class="product-layout"></div>
     <div class="product-layout"></div>
</div>

Заранее спасибо!

Answer 1

[Сергей Соколов]

1. :nth-child() Selector
   
2. .after()
   

Выбрать 30-й, вставить после него. Аналогично с остальными.

Чтобы порядок был случайным, положить имеющиеся в массив const arr = ['banner-0', 'banner-1', 'banner-2']
При вставке из массива вынимать arr.splice() из случайного индекса Math.floor( Math.random( arr.length)))

Comments

[kamisarlapsha]

Допустим если у меня не наберётся даже 30 <div class="product-layout">. То баннеры не добавятся и следовательно их надо скрывать. Так вот как лучше сделать ?

Думаю вот так, правильно ?

if ($('.product-layout:nth-child(30)').length < 0) {
           $('#banner-0').hide();
           $('#banner-1').hide();
           $('#banner-2').hide();
} esleif ($('.product-layout:nth-child(60)').length < 0) {
           $('#banner-1').hide();
           $('#banner-2').hide();
} elseif ($('.product-layout:nth-child(90)').length < 0) {
           $('#banner-2').hide();
}

[Сергей Соколов]

kamisarlapsha, не, если нужное число элементов не набралось, то и не вставлять див вообще.

[Сергей Соколов]

Не совсем понятна исходная картина. div'ы с баннерами изначально на странице есть, и вы хотите их просто переставить или удалить. Или же изначально их нет, и вы их создаёте и вставляете в JS?

[kamisarlapsha]

Сергей Соколов, Баннера уже есть внизу страницы

[Сергей Соколов]

kamisarlapsha, что-то типа

var x30 = $('.product-layout:nth-child(30)');
var id = banners.splice( Math.floor( Math.random() * banners.length), 1);
var banner = $('#' + id);
if (x30.length) { // есть, перемещаем
  x30.after(banner);
} else { // нет, удаляем
  banner.remove();
}