Reset increments for each list

**laboboy** · 09-08-2009, 11:48 PM

Greetings,

So i have this code which is doing what i sorta want but not really. Right now it just looks for all li elements of a ordered list inside a div with id content. it prepends a span tag with a number that increments from 1 yadda yadda. Ok, now the problem. When there are additional ordered lists, it should reset, right now it just continues off where the last list ends. See example below:

JS:
$('#content ol li').each(function(j){
var bulletNum = j+1;
$(this).prepend('<span class="bullet-'+bulletNum+'"></span>');
});

Outputted html:
<div id="content">
<ol>
<li><span class="bullet-1">what am</span</li>
<li><span class="bullet-2">i doing</span</li>
<li><span class="bullet-3">wrong?</span</li>
</ol>
<ol>
<li><span class="bullet-4">what am</span</li>
<li><span class="bullet-5">i doing</span</li>
<li><span class="bullet-6">wrong?</span</li>
</ol>
</div>

What should happen:
<div id="content">
<ol>
<li><span class="bullet-1">what am</span</li>
<li><span class="bullet-2">i doing</span</li>
<li><span class="bullet-3">wrong?</span</li>
</ol>
<ol>
<li><span class="bullet-1">what am</span</li>
<li><span class="bullet-2">i doing</span</li>
<li><span class="bullet-3">wrong?</span</li>
</ol>
</div>

I know this is probably easy but what am I doing wrong here?

**laboboy** · 09-09-2009, 11:23 AM

can i bump this? *bump*

**justinbarneskin** · 09-10-2009, 08:15 PM

Strange code, what language is that?
Here's all I could decipher, the code you may be looking for is at end

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Th5-59pm50</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>
* {margin:20; padding:0;}

</STYLE>


<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto">
JS:
$('#content ol li').each(function(j){
var bulletNum = j+1;
$(this).prepend('<span class="bullet-'+bulletNum+'"></span>');
});


Outputted html:
<div id="xcontent">
<ol>
<li><span class="bullet-1">what am</span</li>
<li><span class="bullet-2">i doing</span</li>
<li><span class="bullet-3">wrong?</span</li>
</ol>
<ol>
<li><span class="bullet-4">what am</span</li>
<li><span class="bullet-5">i doing</span</li>
<li><span class="bullet-6">wrong?</span</li>
</ol>
</div>

What should happen:
<div id="content">
<ol>
<li><span class="bullet-1">what am</span</li>
<li><span class="bullet-2">i doing</span</li>
<li><span class="bullet-3">wrong?</span</li>
</ol>
<ol>
<li><span class="bullet-1">what am</span</li>
<li><span class="bullet-2">i doing</span</li>
<li><span class="bullet-3">wrong?</span</li>
</ol>
</div>
<SCRIPT type="text/javascript">
var co=document.getElementById('content').getElementsByTagName('ol');
 for(i=0;i<co.length;i++){   var l=co[i].getElementsByTagName('li');
                  for(j=0;j<l.length;j++){l[j].innerHTML='<span class="bullet-'+(j+1)+'" title="class=bullet-'+(j+1)+'">'+(j+1)+'</span>'}
 }
</SCRIPT>


</BODY></HTML>

**laboboy** · 09-10-2009, 09:19 PM

thanks. im going to give that a try. I'm using jquery btw I should of stated that.

**laboboy** · 09-10-2009, 09:27 PM

Thanks Justin! That worked perfectly. Can you tell me what I needed to do?

**justinbarneskin** · 09-11-2009, 12:04 AM

Its only javascript, hope you see whats going on and can work with it.

**laboboy** · 09-11-2009, 11:19 AM

one things though. innerHTML is replacing all the content inside the li element. I just want the span tags to be prepended to the li element.

<li><span class="bullet-1"></span> lorem ipsum dolor sit</li>

and not

<li><span class="bullet-1"></span></li>

**justinbarneskin** · 09-11-2009, 12:22 PM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Th5-59pm50</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>
* {margin:20; padding:0;}

</STYLE>


<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto">
<div id="content">
<ol>
<li>how</li>
<li>about</li>
<li>this</li>
</ol>
<ol>
<li>then?</li>
<li>yes</li>
<li>no?</li>
</ol>
<ol>
<li>I knew</li>
<li>you'd be back</li>
<li>for this</li>
</ol>
</div>
<SCRIPT type="text/javascript">
var co=document.getElementById('content').getElementsByTagName('ol');
 for(i=0;i<co.length;i++){   var l=co[i].getElementsByTagName('li');
                  for(j=0;j<l.length;j++){ var ih=l[j].innerHTML;
           l[j].innerHTML='<span class="bullet-'+(j+1)+'" title="class=bullet-'+(j+1)+'">'+ih+'</span>'}
 }
</SCRIPT>


</BODY></HTML>

**justinbarneskin** · 09-11-2009, 12:49 PM

Here's another way if you already have spans inside the <li>

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Th5-59pm50</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>
* {margin:20; padding:0;}
.bullet-1{color:green}
.bullet-2{color:red}
.bullet-3{color:blue}
.bullet-4{color:#FF9900}

</STYLE>


<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto">
<div id="content">
<ol>
<li><span>how</span></li>
<li><span>about</span></li>
<li><span>this</span></li>
</ol>
<ol>
<li><span>then?</span></li>
<li><span>yes</span></li>
<li><span>no?</span></li>
</ol>
<ol>
<li><span>I knew</span></li>
<li><span class="bullet-4">you'd be</span></li>
<li><span>back</span></li>
<li><span>for this</span></li>
</ol>
</div>
<SCRIPT type="text/javascript">
var co=document.getElementById('content').getElementsByTagName('ol');
 for(i=0;i<co.length;i++){   var l=co[i].getElementsByTagName('li');
                  for(j=0;j<l.length;j++){ l[j].getElementsByTagName('span')[0].className='bullet-'+(j+1)+'';

	}
 }
</SCRIPT>


</BODY></HTML>

Thread: Reset increments for each list

Thread Tools

Display

Reset increments for each list

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions