javascript - 如何使用 JavaScript 为每个列表项添加唯一图标

Question

我的网站上有一个列表，每个列表项都有一个唯一的类名。现在我想为每个类分配一个特定的 Font Awesome 图标。这是我的 html:

<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
    <li class="item-4"></li>
</ul>

我想做的是使用 javascript，编写一些代码来为每个独特的类分配一个很棒的字体图标，这样它最终看起来像这样:

<ul>
    <i class="far fa-route"></i><li class="item-1"></li>
    <i class="far fa-map"></i><li class="item-2"></li>
    <i class="far fa-clock"></i><li class="item-3"></li>
    <i class="far fa-calendar"></i><li class="item-4"></li>
</ul>

所以如您所见，我想为每个独特的类赋予不同的图标。我该怎么做呢？另外，我对 javascript 很陌生，所以如果您需要更多信息，请告诉我。

Answer 1

创建超棒字体类数组。获取所有 lis，然后您可以在其上使用 insertBefore。

const awesomeIcons = ["fa-route", "fa-map", "fa-clock", "fa-calendar"];

const ul = document.querySelector('ul');
const lis = ul.querySelectorAll('li');

const newlis = [...lis].forEach((li, idx) => {
  const i = document.createElement('i');
  i.className = "far " + awesomeIcons[idx];
  ul.insertBefore(i, li);
});

<ul>
  <li class="item-1">Item 1</li>
  <li class="item-2">Item 2</li>
  <li class="item-3">Item 3</li>
  <li class="item-4">Item 4</li>
</ul>