Question

假设我有一个这样的列表（但这将生成，因此可能会有所不同）

<ul class="alphabet">
                    <li>2015</li>
                    <li>2019</li>
                    <li>apples</li>
                    <li>arrows</li>
                    <li>cakes</li>
                    <li>calculators</li>
                    <li>oranges</li>
                    <li>papers</li>
                    <li>parts</li>
                    <li>plums</li>
                    <li>zebras</li>
                 </ul>

，并希望实现

<h2>2</h2>
<ul>
<li>2015</li>
<li>2019</li>
</ul>


<h2>A</h2>
<ul>
<li>apples</li>
<li>arrows</li>
</ul>

<h2>C</h2>
<ul>
<li>cakes</li>
<li>calculators</li>
</ul>

<h2>O</h2>
<ul>
<li>oranges</li>
</ul>

<h2>P</h2>
<ul>
<li>papers</li>
<li>parts</li>
<li>plums</li>
</ul>

<h2>Z</h2>
<ul>
<li>zebras</li>
</ul>

在不同的情况下，我将使用PHP查找单词中第一个出现的字母并进行替换，但是我需要使用Javascript。

顺便说一句：我正在使用easyListSplitter插件，因此在转换为每个UL之后我应该调用easyListSplitter吗？还是在创建列后进行转换？

Answer 1

这基本上是一个简单的分组操作，并且有些附加到文档中

const el = Array.from(document.querySelectorAll('.alphabet li'));

const grouped = el.reduce((a, b) => {
  const char = b.innerText.charAt(0).toUpperCase();
  return a.set(char, (a.get(char) || []).concat(b));
}, new Map);

const html = Array.from(grouped).forEach(([key, lis]) => {
  const h2 = document.createElement('h2');
  h2.appendChild(document.createTextNode(key));
  const ul = document.createElement('ul');
  lis.forEach(li => ul.appendChild(li));

  const div = document.createElement('div');
  div.appendChild(h2);
  div.appendChild(ul);

  document.body.appendChild(div);
});

<ul class="alphabet">
  <li>2015</li>
  <li>2019</li>
  <li>apples</li>
  <li>arrows</li>
  <li>cakes</li>
  <li>calculators</li>
  <li>oranges</li>
  <li>papers</li>
  <li>parts</li>
  <li>plums</li>
  <li>zebras</li>
</ul>

Answer 2

这是我解决问题的方法：

let listElems = document.querySelectorAll('ul.alphabet > li');
let result = document.querySelector('.result');
let lists = {};

listElems.forEach(li => {
  let firstLetter = li.innerText[0];
  firstLetter in lists ?
    lists[firstLetter].push(li):
    lists[firstLetter] = [li];
});

for(list in lists) {
  var header = document.createElement("h2");
  header.innerText = list;
  result.appendChild(header);

  var ul = document.createElement("ul");
  lists[list].map(li => ul.appendChild(li));
  result.appendChild(ul);
}

<ul class="alphabet">
  <li>2015</li>
  <li>2019</li>
  <li>apples</li>
  <li>arrows</li>
  <li>cakes</li>
  <li>calculators</li>
  <li>oranges</li>
  <li>papers</li>
  <li>parts</li>
  <li>plums</li>
  <li>zebras</li>
</ul>
<div class="result"></div>

如何替换列表中每个字母的首次出现？

2 个答案: