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还是很陌生，所以如果您需要更多信息，请告诉我。

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>

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

1 个答案: