Question

<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>

有没有办法为另一个ul列表开始一个新计数？使用上面的代码，这就是我得到的！

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

输出

1. test
2. test
3. test

第二个ul列表

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

输出

4. test
5. test
6. test

而不是使用1. 2. 3.继续使用第一个ul 5. 6. 7开始计算第二个ul。

那么是否有可能重置计数并将其重新标记为另一个ul标签？如果有可能如何？

Answer 1

使用有序列表：

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; }

编辑：如果确实你不能使用有序列表，那么使用一些JavaScript，如下所示：

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

jsFiddle example

Answer 2

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

演示： http://jsfiddle.net/vSyK6/1/

Answer 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;
});

示例：http://jsbin.com/opuyi/3

这将废弃嵌套列表，因为它们（可能）看起来像这样：

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

使用jQuery启动新的编号列表

3 个答案: