Comment numéroter séquentiellement des listes ordonnées imbriquées en HTML ?

Comment numéroter des listes ordonnées imbriquées en HTML

En HTML, les listes ordonnées imbriquées sont généralement affichées avec une numérotation imbriquée. Par défaut, chaque niveau imbriqué recommence à 1. Cependant, il peut être souhaitable de numéroter les éléments imbriqués de manière séquentielle.

Approche CSS (fonctionne dans les navigateurs modernes)

Pour obtenir une numérotation séquentielle, vous pouvez utiliser le type de style de liste CSS et le contre- propriétés d'incrémentation :

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

Cette méthode interprète le contenu des balises ol comme de simples listes, permettant une numérotation séquentielle. Dans le navigateur, il affichera la liste ordonnée imbriquée comme suit :

<ol>
  <li>first</li>
  <li>
    second
    <ol>
      <li>2.1. second nested first element</li>
      <li>2.2. second nested second element</li>
      <li>2.3. second nested third element</li>
    </ol>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

Approche jQuery (Compatibilité IE6/7)

Pour les navigateurs qui ne prennent pas en charge l'approche CSS (IE6/7 ), vous pouvez utiliser jQuery pour ajouter la numérotation souhaitée :

<script>
  $(document).ready(function() {
    if ($('ol:first').css('list-style-type') != 'none') {
      $('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 JavaScript cible les navigateurs non pris en charge et modifie la structure de liste non ordonnée pour obtenir la numérotation souhaitée. Dans ces navigateurs, il affichera la liste ordonnée imbriquée comme suit :

<ol>
  <li>first</li>
  <li>
    <p>second</p>
    <p>2.1. second nested first element</p>
    <p>2.2. second nested second element</p>
    <p>2.3. second nested third element</p>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

En combinant les deux approches, vous pouvez garantir que les listes ordonnées imbriquées sont numérotées de manière séquentielle dans tous les principaux navigateurs.

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!