jQuery Sequential List Problem

Question

This is probably very simple!

I followed a tutorial from http://webdesignerwall.com/demo/jquery-sequential/jquery-sequential-list.html

It works fine when there is one ol list on the page. But when there are 2 ol lists I have an issue:

$(document).ready(function(){

   $("ol.step li").each(function (i) {
      i = i+1;
      $(this).prepend('<span class="stepnumber"> Step '+i+'</span>');
   });

}); 


<ol class="step">
    <li>something</li>   
    <li>something</li>   
    <li>something</li>   
</ol>

<ol class="step">
    <li>something</li>   
    <li>something</li>   
    <li>something</li>   
</ol> 

When I have more than one ol the steps keep going, traversing into the next ol like so:

-- start ol---

Step 1 - something

Step 2 - something

Step 3 - something

-- end ol --

-- begin ol --

Step 4 - something

Step 5 - something

Step 6 - something

-- end ol --

I need it to be: 1,2,3 and then begin again at 1,2,3 for the next ol NOT 1,2,3,4,5,6!

Can anyone help?

Thanks for the fast response!

Answer 1

You'll want to process each list separately. Something like:

$(document).ready(function(){
   $("ol.step").each(function () {
      var i = 1;
      $(this).children().each(function() {
          $(this).prepend('<span class="stepnumber"> Step '+i+'</span>');
          i++;
      });
   });
});