javascript - 将分隔符添加到按字母顺序排列的列表

Question

我有按字母顺序排列的列表 -

<ul id="my-list">
  <li>Afghanistan</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>Belgium</li>
  <li>Belize</li>
  <li>Brazil</li>
  <li>Canada</li>
  <li>Chile</li>
  <li>Columbia</li>
  ...
</ul>

我需要做的是在每个新字母开始的地方动态添加字母分隔符 -

<ul id="my-list">
  <div>A</div>
  <li>Afghanistan</li>
  <li>Albania</li>
  <li>Algeria</li>
  <div>B</div>
  <li>Belgium</li>
  <li>Belize</li>
  <li>Brazil</li>
  <div>C</div>
  <li>Canada</li>
  <li>Chile</li>
  <li>Columbia</li>
  <div>D</div>
  ...
</ul>

这可能吗？

Answer 1

当然，这是可能的。您当然应该自己查找这些内容，但这里有一种可能的方法。

const list = Array.from(document.querySelector('#my-list').children);
list.forEach(i => {
	const letter = i.innerHTML.charAt(0);
	if (!accountedFor(letter)) i.insertAdjacentHTML('beforebegin', `<div>${letter}</div>`); 
});

function accountedFor(letter) {
	return document.querySelector('#my-list').innerHTML.includes(`<div>${letter}</div>`);
}

<ul id="my-list">
	<li>Afghanistan</li>
	<li>Albania</li>
	<li>Algeria</li>
	<li>Belgium</li>
	<li>Belize</li>
	<li>Brazil</li>
	<li>Canada</li>
	<li>Chile</li>
	<li>Columbia</li>
</ul>