为许多li元素添加图标

Question

什么是向大量li元素添加不同图标的最有效方法。 现在我现在正在使用一个单独的类，但它有多余的所有css类。

我认为这样做的唯一方法是使用javascript jquery。这是唯一的方法，因为css没有循环能力，或者我不知道。

Answer 1

类 是向许多li元素添加不同图标的最有效方式。

请记住keep all icons in one file。那，加上一些基于网络的精灵生成器可以为你节省一些工作。

在JavaScript中执行此操作会影响页面加载速度和整体用户体验。

Answer 2

您可以做的是将所有图标放入单个图像中，并使所有li元素属于使用该大图像作为背景的类。然后只需指定每个li的背景偏移量。

这是一种称为精灵表的技术 - 有关详细信息，请阅读AListApart:Sprites

Answer 3

您可以使用jQuery遍历页面中的所有li元素，并执行一些操作（此示例将图像添加到每个元素）：

$("li").each(function() {
    $(this).prepend("<img src='random.png' />");
});

但是，如果你需要为每个元素添加不同的图像，我不会看到如何通过它们循环来帮助你。如果是这样的话，你当前使用一长串CSS类的方法有什么问题？

更新根据您的评论，您可以获取每个li元素的索引，并在添加图片时在src属性中使用它：

$("li").each(function() {
    var index = $(this).index();
    $(this).prepend("<img src='random" + index + ".png' />");
});