advanced code snippet search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

frujo on 08/12/09


Tagged

css html jquery


Versions (?)


List Numeration (two levels only)

Published in: HTML 

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

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

Embed | Plain TextExpand 
  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>

Report this snippet 

You need to login to post a comment.