Как сократить код и уточнить место?

Question

имею

<div class="sl-ide">
        <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
ТАКИХ БЛОКОВ МНОГО
         <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
    </div>

этими скриптами группирую в разные блоки с разным количеством
вариант 1

let items = $(".sl-ide");
items.slice(0,5).wrapAll('<div class="red">');     
items.slice(5,8).wrapAll('<div class="red">');
items.slice(8,10).wrapAll('<div class="red">');
а таких строк много

мне кажется это глупо повторять строку пять...десять раз....

вариант 2
или вот еще вариант, но он длинее на несколько строк

const items = [...document.querySelectorAll('.itek')];
const sections = [[0, 5], [5, 8], [8, 10]];

sections.forEach((section, i) => {
  const div = document.createElement('div');
  div.className = `div${i}`;
  document.querySelector('.sl-ide').append(div);
  div.append(...items.slice(...section));
});

а мне нужно задать для групп блоков одинаковую обертку(стиль)меня интересует строка div.className = `div${i}`; , которая задает отдельный стиль для каждой группы, я пишу div.className = `mydivstyle`; и получаю что мне нужно - одинаковый стиль для всех групп...
НО
может есть решение проще --- что-то типа (ээто не работает)

items.slice [[0, 5], [5, 8], [8, 10]].wrapAll('<div class="mydivstyle">');

и чтоб это все работало в "глобальном" диве <div class="sl-ide">

Answer 1

Мало кода - не всегда хорошо :) Тем не менее,

[0, 5], [5, 8], [8, 10] сократил до → [0, 5, 8], на каждой итерации можно взять текущий элемент массива и i + 1-й, будут получаться те же пары.

Надо заметить, что на последней итерации i + 1-й элемент будет undefined.
.slice(8, undefined) равнозначен .slice(8) и дает элементы от 8 до конца. Поэтому это не баг, а фича!)

let items = $(".itek");
let cut = [0, 5, 8];

cut.forEach((point, i) => {
  items.slice(point, cut[i + 1]).wrapAll('<div class="red">')
});

.itek {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #800;
  margin: 4px 4px 0 0;
}

.red {
  border-bottom: 3px solid #c00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="sl-ide">
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
</div>

Ну и, если заниматься спортивным сокращением кода...

[0, 5, 8].map((e, i, a) => $(".itek").slice(e, a[++i]).wrapAll('<div class="red">'));

БЛОГ НА HUSL

Как сократить код и уточнить место?

Ответы (1 шт):