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

Question

我的网站上有一个列表，每个列表项都有一个唯一的类名。现在我想为每个班级分配一个字体很棒的图标。这是我的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很陌生，所以如果您需要更多信息，请告诉我。

标签： javascripthtmldomfont-awesome

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>