Как разделить список ul li на три отдельных списка ul li?

Чтобы разделить список `ul li` на три отдельных списка `ul li`, где первым элементом каждого списка будет тег `li` с классом "main", можно воспользоваться JavaScript или jQuery.

С помощью JavaScript можно сделать следующим образом:

```html
<ul id="original-list">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
  <li>Элемент 5</li>
  <li>Элемент 6</li>
  <li>Элемент 7</li>
  <li>Элемент 8</li>
</ul>

<script>
// Получаем элемент списка
var originalList = document.getElementById('original-list');

// Создаем три новых элемента списка
var newList1 = document.createElement('ul');
var newList2 = document.createElement('ul');
var newList3 = document.createElement('ul');

// Добавляем класс "main" к первому элементу каждого списка
newList1.innerHTML = '<li class="main">' + originalList.firstChild.innerHTML + '</li>';
newList2.innerHTML = '<li class="main">' + originalList.firstChild.nextSibling.innerHTML + '</li>';
newList3.innerHTML = '<li class="main">' + originalList.lastChild.innerHTML + '</li>';

// Перемещаем оставшиеся элементы в новые списки
while (originalList.firstChild) {
  newList1.appendChild(originalList.firstChild);
}
while (originalList.firstChild) {
  newList2.appendChild(originalList.firstChild);
}
while (originalList.firstChild) {
  newList3.appendChild(originalList.firstChild);
}

// Заменяем исходный список новыми списками
originalList.parentNode.replaceChild(newList1, originalList);
document.body.appendChild(newList2);
document.body.appendChild(newList3);
</script>
```

Если вы хотите использовать jQuery, то код будет выглядеть следующим образом:

```html
<ul id="original-list">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
  <li>Элемент 5</li>
  <li>Элемент 6</li>
  <li>Элемент 7</li>
  <li>Элемент 8</li>
</ul>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // Клонируем исходный список
  var originalList = $('#original-list').clone();

  // Создаем три новых списока и добавляем класс "main" к первому элементу каждого списка
  var newList1 = originalList.clone().prepend('<li class="main">' + originalList.find('li:first-child').text() + '</li>');
  var newList2 = originalList.clone().prepend('<li class="main">' + originalList.find('li:first-child').next('li').text() + '</li>');
  var newList3 = originalList.clone().prepend('<li class="main">' + originalList.find('li:last-child').text() + '</li>');

  // Удаляем первый элемент из каждого списка
  originalList.find('li:first-child').remove();
  newList1.find('li:first-child').nextAll().remove();
  newList2.find('li:first-child').nextAll().remove();
  newList3.find('li:first-child').prevAll().remove();

  // Заменяем исходный список новыми списками
  $('#original-list').replaceWith(newList1);
  $('body').append(newList2, newList3);
});
</script>
```

В обоих случаях, исходный список разделится на три отдельных списка `ul li`, причем первым элементом каждого списка будет `li` с классом "main".

const ul = document.querySelector('ul');
const parent = ul.parentElement;

// Переменная "e" инициализирована как пустое значение
let e = null;

// Перебираем все дочерние элементы списка "ul"
[...ul.children].forEach((li, i, arr) => {
    // Если текущий элемент имеет класс "main"
    if (li.classList.contains('main')) {
        // Если переменная "e" уже содержит элемент, добавляем его в родительский элемент "parent"
        e && parent.appendChild(e);
        // Создаем новый список "ul"
        e = document.createElement('ul');
    } 
    // Если текущий элемент является последним, добавляем элемент "e" в родительский элемент "parent"
    else if (i === arr.length - 1) {
        parent.appendChild(e);
    }
    // Добавляем текущий элемент "li" в список "e"
    e.appendChild(li);
});

// Удаляем из DOM элемент "ul"
ul.remove();