How to Number Nested Ordered Lists with Continued Counting in HTML?

Number of nested ordered lists in HTML

You have a nested ordered list and want to change the second level of nested elements The numbering method allows it to inherit the number from the previous layer and continue counting. Currently, the second level elements start counting again at 1, but you want them to be numbered in decimals, such as 2.1, 2.2, and 2.3.

This problem can be solved by:

CSS solution (all modern browsers)

html > body ol {
  list-style-type: none;
  counter-reset: level1;
}

ol li:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}

ol li ol {
  list-style-type: none;
  counter-reset: level2;
}

ol li ol li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}

This CSS uses a counter mechanism, Maintain numbers for each nesting level. It works fine in all modern browsers.

JQuery solution compatible with IE6/7

For Internet Explorer 6/7, the Pure CSS solution does not work. Therefore, a fallback mechanism is needed:

<script>
  $(document).ready(function() {
    if ($('ol:first').css('list-style-type') != 'none') { // For IE6/7 only.
      $('ol ol').each(function(i, ol) {
        ol = $(ol);
        var level1 = ol.closest('li').index() + 1;
        ol.children('li').each(function(i, li) {
          li = $(li);
          var level2 = level1 + '.' + (li.index() + 1);
          li.prepend('<span>' + level2 + '</span>');
        });
      });
    }
  });
</script>

This jQuery code will add numbers to Internet Explorer 6/7 browsers. It inserts a span before the element containing the nested number.

The above is the detailed content of How to Number Nested Ordered Lists with Continued Counting in HTML?. For more information, please follow other related articles on the PHP Chinese website!