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.

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

Report this snippet  

You need to login to post a comment.