Adding icons to many li elements

Whats the most efficient way to add different icons to a large number of li elements. right now I'm using a separate class for now but its kind of redundant to have all theses css classes.

I'm thinking the only way to do this is using javascript jquery. Is this 开发者_如何学Pythonthe only way, as css has no looping ability, or not that I know about.

---

Classes are the most efficient way to add different icons to many li elements.

Remember to keep all icons in one file. That, plus some web-based sprites generators should save you some work.

Doing that in JavaScript would affect page load speed and overall user experience.

---

What you could do is put all your icons into a single image, and have all the li elements belong to a class that uses that large image as the background. Then simply specify the background offset for each li.

This is a technique known as a sprite sheet - for more info read AListApart:Sprites

---

You can use jQuery to loop through all of the li elements in your page, and perform some action (this example prepends an image to each element):

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

However, if you need to add a different image to each element, I don't see how looping through them all is going to help you. If that's the case, what's wrong with your current method of using a long list of CSS classes?

Update Based on your comment, you could get the index of each li element and use it in the src attribute when adding the image:

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