Разделить маркированный список

Question

Есть маркированный список. Нужно его разбить на группы. По сути, зацепившись за заголовок, добавить над ним закрывающий тег </ul> и затем снова открыть. Но, на выходе получаем добавление перед пунктом с заголовком <ul></ul>. Как правильно закрыть и открыть список перед пунктом списка с классом heading2 и heading3?

Код добавил для понимания ситуации и отображения текущей проблемы:

let formField = document.querySelector('.form-field');
let heading = ['heading2', 'heading3'];
if (formField) {
  let allFields = [...document.querySelectorAll('.form-field')];
  allFields.forEach(el => {
    if (heading.some(heading => el.classList.contains(heading))) {
      el.insertAdjacentHTML('beforebegin', '</ul><ul>');
    }
  });
}

ul {
  border: 1px solid #666;
  padding: 10px;
  list-style: none;
}

<ul>
  <li class="form-field heading1">Heading</li>
  <li class="form-field">1</li>
  <li class="form-field">2</li>
  <li class="form-field">3</li>
  <li class="form-field">4</li>
  <li class="form-field heading2">Heading</li>
  <li class="form-field">5</li>
  <li class="form-field">6</li>
  <li class="form-field">7</li>
  <li class="form-field heading3">Heading</li>
  <li class="form-field">8</li>
  <li class="form-field">9</li>
  <li class="form-field">10</li>
  <li class="form-field">11</li>
  <li class="form-field">12</li>
</ul>

Answer 1

Изменим в соответствии с Вашим алгоритмом innerHTML, а затем заменим родительский элемент.

let ul = (formField = document.querySelector('.form-field')).parentElement;
let heading = ['heading2', 'heading3'];
if (formField) {
    let string = "</ul><ul>";
    let offset = string.length+1;
    let inner = "<ul>"+ul.innerHTML;
    let index = inner.indexOf('<li class="form-field heading', offset);
    while (index > -1) {
        inner = inner.slice(0, index) + string + inner.slice(index);
        index = inner.indexOf('<li class="form-field heading', (index+=offset));
    }
    ul.outerHTML = inner;
}

ul {
  border: 1px solid #666;
  padding: 10px;
  list-style: none;
}

<ul>
  <li class="form-field heading1">Heading</li>
  <li class="form-field">1</li>
  <li class="form-field">2</li>
  <li class="form-field">3</li>
  <li class="form-field">4</li>
  <li class="form-field heading2">Heading</li>
  <li class="form-field">5</li>
  <li class="form-field">6</li>
  <li class="form-field">7</li>
  <li class="form-field heading3">Heading</li>
  <li class="form-field">8</li>
  <li class="form-field">9</li>
  <li class="form-field">10</li>
  <li class="form-field">11</li>
  <li class="form-field">12</li>
</ul>

БЛОГ НА HUSL

Разделить маркированный список

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