Add a sequential class number to each item

This JS adds a sequential class number to each item. [email protected]

by Ryan Brackett

HTML

<ul class="list">
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
    <li>Strawberry</li>
    <li>Peach</li>
    <li>Pear</li>
    <li>Melon</li>
</ul>

CSS

body {
    font-family: Arial;
    font-weight: bold;
}
li.item-1 {
    color: red
}
li.item-3 {
    color: purple
}
li.item-6 {
    color: green;
}

JavaScript

// Adds a sequential class number to each item

$(".list li").each(function (i) {
    i = i + 1;
    $(this).addClass("item-" + i);
});