Advanced Search

List Numeration (two levels only)

/ Published in: HTML
Save to your folder(s)
This is a raw example of the nested lists structure with inherited numeration.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5. <title>Nested Lists Numeration</title>
  6. <script src="/js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
  7. <script language="javascript">
  8. $(document).ready(function() {
  9.  
  10. 	var numNestedList = $('ul ul');
  11. 	var numItems = $('ul > li');
  12. 	var numNestedItems = $('li ul li');
  13.  
  14. 	for (i=0; i<numItems.length; i++) {
  15. 		numItems.not('li ul li').eq(i).prepend(i+1+". ");
  16. 	}
  17.  
  18. 	for (i=0; i<numNestedItems.length; i++) {
  19. 		for (j=0; j<numNestedList.length; j++) {
  20. 			var nUl = numNestedList.eq(j).parent().text();
  21. 			numero = nUl.split(".",1);
  22. 		}
  23. 		numNestedItems.eq(i).prepend(numero + "." + (i+1) + ". ");
  24. 	}
  25.  
  26. });
  27. </script>
  28. <style media="screen" type="text/css">
  29. ul,
  30. ul ul {
  31. 	list-style:none;
  32. }
  33. </style>
  34. </head>
  35.  
  36. <body>
  37. <ul>
  38. 	<li>First Item</li>
  39. 	<li>Second Item
  40. 		<ul>
  41. 			<li>Whoops!</li>
  42. 			<li>dadda!</li>
  43. 			<li>Whoops!</li>
  44. 			<li>dadda!</li>
  45. 			<li>Whoops!</li>
  46. 			<li>dadda!</li>
  47. 		</ul>
  48. 	</li>
  49. 	<li>Third Item</li>
  50. 	<li>Forth Item</li>
  51. </ul>
  52. </body>
  53. </html>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.