CODEWITHSUNDEEP
javascriptjquerylistincrement
user585303
user585303

Reputation: 247

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?

Upvotes: 3

Views: 1316

Answers (3)

eyelidlessness
eyelidlessness

Reputation: 63529

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

Upvotes: 0

Jacob Relkin
Jacob Relkin

Reputation: 163288

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

Upvotes: 2

Šime Vidas
Šime Vidas

Reputation: 186013

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

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

Upvotes: 2

Related Questions