Posted By

frujo on 08/12/09

Tagged

Versions (?)

Last Edited at 08/12/09 08:02am

Statistics

Viewed 613 times

Favorited by 0 user(s)

Related snippets

List Numeration (two levels only)

/ Published in: HTML

This is a raw example of the nested lists structure with inherited numeration.

Highlighted TextExpand

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Nested Lists Numeration</title>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(document).ready(function() {
	
	var numNestedList = $('ul ul');
	var numItems = $('ul > li');
	var numNestedItems = $('li ul li');
	
	for (i=0; i<numItems.length; i++) {
		numItems.not('li ul li').eq(i).prepend(i+1+". ");
	}
	
	for (i=0; i<numNestedItems.length; i++) {
		for (j=0; j<numNestedList.length; j++) {
			var nUl = numNestedList.eq(j).parent().text();
			numero = nUl.split(".",1);
		}
		numNestedItems.eq(i).prepend(numero + "." + (i+1) + ". ");
	}

});
</script>
<style media="screen" type="text/css">
ul,
ul ul {
	list-style:none;
}
</style>
</head>

<body>
<ul>
	<li>First Item</li>
	<li>Second Item
		<ul>
			<li>Whoops!</li>
			<li>dadda!</li>
			<li>Whoops!</li>
			<li>dadda!</li>
			<li>Whoops!</li>
			<li>dadda!</li>
		</ul>
	</li>
	<li>Third Item</li>
	<li>Forth Item</li>
</ul>
</body>
</html>

URL: http://serhiy.com.ua/examples/lists-numeration/

Report this snippet Tweet