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

Question

Как распределить 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

const items = document.querySelectorAll('.ul-parent > li')
const sorted = {}

for (let item of items) {
  const firstLetter = item.innerText.trim().slice(0, 1).toLowerCase()
  if (!sorted[firstLetter]) sorted[firstLetter] = []
  sorted[firstLetter].push(item)
}

for (let key in sorted) {
  const list = document.createElement('ul')
  list.className = `ul-parent letter-${key}`
  list.append(...sorted[key])
  document.body.append(list)
}

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

БЛОГ НА HUSL

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

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