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

Question

[ishmahorka]

Как распределить li по разным ul в зависимости от их первой буквы, а родителям задать соответствующие буквенные классы?
Например есть:

<ul class="ul-parent">
  <li>Acer</li>
  <li>Samsung</li>
  <li>Sony</li>
  <li>Huawei</li>
  <li>HTC</li>
  <li>Xiaomi</li>
</ul>

Как сделать с помощью JS, чтобы это форматировалось как:

<ul class="ul-parent a-litter">
      <li>Acer</li>
    </ul>
    <ul class="ul-parent s-litter">
      <li>Samsung</li>
      <li>Sony</li>
    </ul>
    <ul class="ul-parent h-litter">
      <li>Huawei</li>
      <li>HTC</li>
    </ul>
    <ul class="ul-parent x-litter">
      <li>Xiaomi</li>
    </ul>

Answer 1

[0xD34F]

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

const groupedNodes = Array.prototype.reduce.call(
  ul.children,
  (acc, n) => {
    const k = n.textContent[0].toLowerCase();
    (acc[k] = acc[k] ?? []).push(n);
    return acc;
  },
  {}
);

ul.replaceWith(...Object.entries(groupedNodes).map(n => {
  const ul = document.createElement('ul');
  ul.classList.add('ul-parent', n[0] + '-litter');
  ul.append(...n[1]);
  return ul;
}));

или

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

const groupedHTML = Array
  .from(ul.querySelectorAll(':scope > li'))
  .reduce((acc, { innerText: [ c ], outerHTML }) => {
    const k = c.toLowerCase();
    (acc[k] = acc[k] ?? []).push(outerHTML);
    return acc;
  }, {});

ul.outerHTML = Object
  .entries(groupedHTML)
  .map(([ k, v ]) => `<ul class="ul-parent ${k}-litter">${v.join('')}</ul>`)
  .join('');

Comments

[ishmahorka]

Подскажите, а если текст находится в<li><a>Название пункта</a></li>? Как изменится код?

[Игорь]

ishmahorka, никак не изменится