ol list counter reset based on start property using jquery

Question

I need to make a jquery script that can take the OL start properly and transform it into a css based counter. So for a html like this:

<ol >
  <li>First</li>
  <li>Second</li>
</ol>
<p></p>
<ol start ="3" >
  <li>First</li>
  <li>Second</li>
</ol>

should start the numbering from 3 on the second list using the css

OL { counter-reset: list 3 }
LI { display: block }
LI:before {
content: counter(item) ". ";
counter-increment: item;
display:block;
}

I'd like to add the counter reset automatically based on the start property. What i got till now is :

$("ol").each(function() {

  var index = $("ol").prop("start")-1;
  $(this).css({counter-reset:list index});    

});

the index var is working but i don't know how to insert that inside the css property.

Answer 1

We're doing this with JS because the surrounding CSS is hiding the default numbering. We have a CMS that is providing a start attribute:

If you did want to do it in JS, I'd suggest:

<ol >
  <li>First</li>
  <li>Second</li>
</ol>
<p></p>
<ol start="3" >
  <li>First</li>
  <li>Second</li>
</ol>

Then this CSS will recreate the numbering using :before

ol {
    counter-reset: li
}

li {
    list-style-type: none;
    counter-increment:li;
}

li:before {
    content:" " counter(li) ". ";
}

and this JS will then apply the start attribute in conjunction with your styles:

$("ol").each(function(idx, el) {
  var index = parseInt($(el).attr("start"))-1;
    if (!isNaN(index)) {
        $(el).css({'counter-reset':'li ' + index});    
    }
});

as demonstrated here...

http://jsfiddle.net/sifriday/vt2nconp/2/