2

Есть ряд блоков например:

<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>

Нужно на чистом JS добавить обвертку через каждые N блоков например через каждые три штуки. Открывающий тэг первой обвертки и закрывающий тэг последней можно дописать прямо в код, но все промежуточные тэги обверток нужно добавлять именно на Javascript'e, поскольку для разных экранов будет разное N (html генерируется на РНР, а РНР не понимает размеры экранов).

Попробовал решить задачу вот так:

<div class="wrap">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div><!--wrap-->
<script>
var items = document.querySelectorAll('.item');
for(i = 0; i < items.length; i++) {
    var number = i*1+1*1;
    if(number % 3 === 0) {
        items[i].outerHTML = items[i].outerHTML+"</div><!--wrap-->\n<div class=\"wrap\">";
    }
}
</script>

Но в инструментах разработчика в Хроме вижу что после третьего блока просто получаю пустую обвертку:

...
<div class="item">
Item 3
</div>
<!--wrap-->
<div class="wrap"></div>
<div class="item">
Item 4
</div>
...

Хотя должно быть:

...
<div class="item">
Item 3
</div>
</div><!--wrap-->
<div class="wrap">
<div class="item">
Item 4
</div>
...

В общем нужен аналог

var items = $('.item');
for(var i = 0; i < items.length; i += 3) {
    items.slice(i, i + 3).wrapAll('<div class="wrap"></div>');
}

только на чистом JS

5
  • врапиться должен каждый третий элемент или элементы должны врапиться блоками по 3?
    – yolosora
    12 мар 2018 в 10:50
  • Каждые три блока т.е. блоками по три
    – stckvrw
    12 мар 2018 в 10:52
  • Псевдокласс nth-child Вам в помощь.
    – user207618
    12 мар 2018 в 10:58
  • @Other, и как он тут поможет?
    – Grundy
    12 мар 2018 в 11:35
  • @Grundy, ну автор хочет вставить между каждыми N код - этот псевдокласс поможет.
    – user207618
    12 мар 2018 в 11:39

2 ответа 2

3

Попробуйте в таком духе.

При нахождении каждого третьего элемента создавать новый элемент wrap и переносить элементы с текущей позиции в качестве дочерних для созданного wrap элемента.

var items = document.querySelectorAll('.item');
var wrap;
for (i = 0; i < items.length; i ++) {
  if (i%3 === 0)
  {
  wrap = document.createElement('div');
  wrap.className = "wrap";
  document.body.appendChild(wrap);
  }
  wrap.appendChild(items[i]);
}
<div class="item">
  Item 1
</div>
<div class="item">
  Item 2
</div>
<div class="item">
  Item 3
</div>
<div class="item">
  Item 4
</div>
<div class="item">
  Item 5
</div>

7
  • добавь описание что у тебя в коде происходит
    – Grundy
    12 мар 2018 в 11:35
  • @Grundy, не нужно, я понимаю суть, сам думал об этом решении...
    – stckvrw
    12 мар 2018 в 11:37
  • 1
    @stckvrw, Нужно в любом случае, так как ответ видишь не только ты.
    – Grundy
    12 мар 2018 в 11:42
  • бтв интересно можно ли хвостом за элементами перенести блоки комментариев.
    – yolosora
    12 мар 2018 в 11:43
  • @yolosora, Это вопрос?
    – Grundy
    12 мар 2018 в 11:43
1

/* получаем контейнер */
var container = document.getElementById("container1");

/* получаем item-ы у контейнера */
var allElements = Array.from(container.getElementsByClassName("item"));

var wrapSize = 3;

for (var i = 0; i < allElements.length; i += wrapSize) {

  /* создаём врап */
  var wrap = document.createElement("div");
  wrap.classList.add("wrap");

  /* наполняем нужным количеством элементов */
  for (var j = 0; j < wrapSize; j++) {
    if (i + j < allElements.length) {
      wrap.appendChild(allElements[i + j]);
    }
  }
  
  /* добавляем в контейнер */
  container.appendChild(wrap);
}
.wrap {
 background-color: silver;
 margin: 8px;
}
<div id="container1">
  <div class="item">
    Item 1
  </div>
  <div class="item">
    Item 2
  </div>
  <div class="item">
    Item 3
  </div>
  <div class="item">
    Item 4
  </div>
  <div class="item">
    Item 5
  </div>
  <div class="item">
    Item 6
  </div>
  <div class="item">
    Item 7
  </div>
  <div class="item">
    Item 8
  </div>
</div>

7
  • цикл с вызовом remove() - не нужен. добавь описание что у тебя в коде происходит
    – Grundy
    12 мар 2018 в 11:46
  • @Grundy да, я уже поправил 12 мар 2018 в 11:47
  • Очищать контейнер тоже не надо
    – Grundy
    12 мар 2018 в 11:47
  • @Grundy ага, тоже поправил 12 мар 2018 в 11:48
  • @Grundy они сами удаляются при append-е. 12 мар 2018 в 11:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.