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 all over again for another ul tag? If it is possible how?

回答1:

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

回答2:

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

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

回答3:

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

来源：https://stackoverflow.com/questions/4765906/start-new-numbered-list-using-jquery

标签

javascript

jquery

list

increment