Start new numbered list using jQuery

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

<script>
$(document).ready(function(){   
    var increment=3;
    var start=8;
    $("ul").children().each(function(i) {
        $(this).prepend('<tag>'+(start+i*increment).toString()+'.</tag>');
    });
});
</script>

Is there a way to start a new count for another ul list? With the code above this is what i get!

<ul>
<li> test
<li> test
<li> test
<ul/>

Output

1. test
2. test
3. test

second ul list

<ul>
<li> test
<li> test
<li> test
<ul/>

Output

4. test
5. test
6. test

Instead of starting the second ul tag with 1. 2. 3. it continues to count using the first ul 5. 6. 7.

So is it possible to reset the count and star it al开发者_运维百科l over again for another ul tag? If it is possible how?

Use an ordered list:

HTML

<ol id="num_list">
  <li>How</li>
  <li>Now</li>
  <li>Brown</li>
  <li>Cow</li>
</ol>

CSS

#num_list { list-style-type: decimal; }

EDIT: if indeed you cannot use an ordered list, then use some JavaScript, like this:

$(function() {
  $('ul').each(function() {
     $(this).children().prepend(function(index, html) {
        return '<span>' + (index+1) + '. </span>';
     });
  });
});

jsFiddle example

$('ul').each(function() {
    $(this).children().each(function(i) {
        $(this).prepend('<span>' + (i + 1) + '.</span> ');
    });
});

Demo: http://jsfiddle.net/vSyK6/1/

var increment = 1;
$('ul').each(function() {
    var ul = $(this),
        li = ul.find('> li'),
        ol = $('<ol />').attr('start', increment);
    ul.after(ol);
    ol.append(li);
    ul.remove();
    increment += li.length;
});

Example: http://jsbin.com/opuyi/3

This will crap out with nested lists, as they'd (probably) look something like this:

1. One
2. Two
    4. Three
3. Four