Как разбить список ul li на 3 списка ul li?

Question

[xaruki]

Есть список:

<ul>
	<li class="main"><a href="#">Заголовок 1</a></li>
	<li><a href="#">Ссылка 1</a></li>
	<li><a href="#">Ссылка 3</a></li>
	<li><a href="#">Ссылка 3</a></li>
	<li><a href="#">Ссылка 4</a></li>
	<li class="main"><a href="#">Заголовок 2</a></li>
	<li><a href="#">Ссылка 5</a></li>
	<li><a href="#">Ссылка 6</a></li>
	<li class="main"><a href="#">Заголовок 3</a></li>
	<li><a href="#">Ссылка 7</a></li>
	<li><a href="#">Ссылка 8</a></li>
	<li><a href="#">Ссылка 9</a></li>
	<li><a href="#">Ссылка 10</a></li>
	<li><a href="#">Ссылка 11</a></li>
</ul>

Надо разбить его на 3 списка ul li, чтобы первым элементом каждого списка был тег li c классом main:

<ul>
	<li class="main"><a href="#">Заголовок 1</a></li>
	<li><a href="#">Ссылка 1</a></li>
	<li><a href="#">Ссылка 3</a></li>
	<li><a href="#">Ссылка 3</a></li>
	<li><a href="#">Ссылка 4</a></li>
</ul>

<ul>
	<li class="main"><a href="#">Заголовок 2</a></li>
	<li><a href="#">Ссылка 5</a></li>
	<li><a href="#">Ссылка 6</a></li>
</ul>

<ul>
	<li class="main"><a href="#">Заголовок 3</a></li>
	<li><a href="#">Ссылка 7</a></li>
	<li><a href="#">Ссылка 8</a></li>
	<li><a href="#">Ссылка 9</a></li>
	<li><a href="#">Ссылка 10</a></li>
	<li><a href="#">Ссылка 11</a></li>
</ul>

Answer 1

[Stockholm Syndrome]

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

let e = null;
[...ul.children].forEach((li, i, arr) => {
    if (li.classList.contains('main')) {
        e && parent.appendChild(e);
        e = document.createElement('ul');
    } else if (i === arr.length - 1) {
        parent.appendChild(e);
    }
    e.appendChild(li);
});

ul.remove();

Answer 2

[Aleksandr_K]

<ul>
        <li class="main"><a href="#">Заголовок
                <ul>
                    <li><a href="#">Ссылка 1</a></li>
                    <li><a href="#">Ссылка 3</a></li>
                    <li><a href="#">Ссылка 3</a></li>
                    <li><a href="#">Ссылка 4</a></li>
                </ul>
        </li>
    </ul>
    <ul>
        <li class="main"><a href="#">Заголовок
                <ul>
                    <li><a href="#">Ссылка 1</a></li>
                    <li><a href="#">Ссылка 3</a></li>
                    <li><a href="#">Ссылка 3</a></li>
                    <li><a href="#">Ссылка 4</a></li>
                </ul>
        </li>
    </ul>
    <ul>
        <li class="main"><a href="#">Заголовок
                <ul>
                    <li><a href="#">Ссылка 1</a></li>
                    <li><a href="#">Ссылка 3</a></li>
                    <li><a href="#">Ссылка 3</a></li>
                    <li><a href="#">Ссылка 4</a></li>
                </ul>
        </li>
    </ul>

Comments

[Aleksandr_K]

нужно поправить ссылки...