Step Number

This is the first jQuery script I have every written. It is putting the step number in front of each step

by burn123

HTML

<ul id="steps">
    <li>Beat eggs in blender</li>
    <li>Add sugar, lemon juice, grated rind, and margarine</li>
    <li>Blend until thoroughly mixed</li>
    <li>Pour into pie shell</li>
    <li>Bake at 350F for 35 to 45 minutes or until golden brown</li>
</ul>
<div>Recipe brought to you by <a href="http://www.basic-recipes.com/blog1/easy-lemon-chess-pie/">Basic Recipes</a>

</div>

CSS

li {
    padding:5px;
    text-align:justify;
}
div {
    position:absolute;
    text-align:center;
    bottom:0;
    left:0;
    right:0;
    background-color:white;
    font-size:small;
    border-top:1px solid #999;
    padding:5px 0;
}

JavaScript

$("ul#steps").find("li").each(function () { //Find each list item in #steps
    var li = $(this), // Get the list item
        stepnum = li.index() + 1; //Get the number of which list item it is and add one
    li.prepend("Step " + stepnum + ": "); //Prepend it to each li
});