Comment numéroter des listes ordonnées imbriquées avec un comptage continu en HTML ?

Nombre de listes ordonnées imbriquées en HTML

Vous disposez d'une liste ordonnée imbriquée et souhaitez modifier le deuxième niveau d'éléments imbriqués La méthode de numérotation lui permet d'hériter du nombre de la couche précédente et de continuer à compter. Actuellement, les éléments de deuxième niveau recommencent à compter à 1, mais vous souhaitez qu'ils soient numérotés en décimales, par exemple 2,1, 2,2 et 2,3.

Ce problème peut être résolu par :

Solution CSS (tous les navigateurs modernes)

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;
}

Ce CSS utilise un mécanisme de compteur, Maintenir les nombres pour chaque niveau d'imbrication. Cela fonctionne bien dans tous les navigateurs modernes.

Solution JQuery compatible avec IE6/7

Pour Internet Explorer 6/7, la solution Pure CSS ne fonctionne pas. Par conséquent, un mécanisme de secours est nécessaire :

<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>

Ce code jQuery ajoutera des numéros aux navigateurs Internet Explorer 6/7. Il insère un span avant l'élément contenant le numéro imbriqué.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!