/    Sign up×
Community /Pin to ProfileBookmark

Reset increments for each list

Copy linkTweet thisAlerts:
Sep 09.2009

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?

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@laboboyauthorSep 09.2009 — can i bump this? *bump*
Copy linkTweet thisAlerts:
@justinbarneskinSep 11.2009 — Strange code, what language is that?

Here's all I could decipher, the code you may be looking for is at end

[code=html]<!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>[/code]
Copy linkTweet thisAlerts:
@laboboyauthorSep 11.2009 — thanks. im going to give that a try. I'm using jquery btw I should of stated that.
Copy linkTweet thisAlerts:
@laboboyauthorSep 11.2009 — Thanks Justin! That worked perfectly. Can you tell me what I needed to do?
Copy linkTweet thisAlerts:
@justinbarneskinSep 11.2009 — Its only javascript, hope you see whats going on and can work with it.
Copy linkTweet thisAlerts:
@laboboyauthorSep 11.2009 — 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>
Copy linkTweet thisAlerts:
@justinbarneskinSep 11.2009 — [code=html]<!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>[/code]
Copy linkTweet thisAlerts:
@justinbarneskinSep 11.2009 — Here's another way if you already have spans inside the <li>

[code=html]<!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>[/code]
×

Success!

Help @laboboy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...