Advanced Search

Return to Snippet

Revision: 16682
at August 12, 2009 08:10 by frujo
Updated Code 
<!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>

Revision: 16681
at August 12, 2009 08:07 by frujo
Updated Code 
<!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>Untitled Document</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>

Revision: 16680
at August 12, 2009 08:02 by frujo
Initial Code 
<!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>Untitled Document</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++) {
		numNestedItems.eq(i).prepend(i+1+". ");
		
		for (j=0; j<numNestedList.length; j++) {
			var nUl = numNestedList.eq(j).parent().text();
			numero = nUl.split(".",1);
		}
		numNestedItems.eq(i).prepend(numero + ". ");
	}

});
</script>
</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>
Initial URL 
http://serhiy.com.ua/examples/lists-numeration/
Initial Description 
This is a raw example of the nested lists structure with inherited numeration.
Initial Title 
List Numeration (two levels only)
Initial Tags 
css, html, jquery
Initial Language 
HTML