Wie erstelle ich verschachtelte geordnete Listen in HTML mit konsistenter Nummerierung?

Verschachtelte geordnete Listen in HTML mit Nummerierung

Beim Erstellen verschachtelter geordneter Listen in HTML kann das Problem auftreten, dass die innere Liste mit der Nummerierung beginnt wieder von 1. Dies kann den ordnungsgemäßen Ablauf der Liste stören. Um dieses Problem zu beheben, können die folgenden CSS- und jQuery-Techniken eingesetzt werden:

CSS-Ansatz

Für Browser, die CSS-Stil unterstützen, können Sie die Eigenschaft counter-reset verwenden, um Setzen Sie die Nummerierung für jede Ebene der Liste zurück. Die Counter-Inkrement-Eigenschaft erhöht den Zähler für jedes Listenelement.

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

jQuery-Ansatz

Für ältere Browser wie IE6/7, die den Zähler nicht unterstützen- Mit der Eigenschaft „reset“ können Sie die Nummerierung mit jQuery manuell einfügen. Bei dieser Methode wird jedem Element ein vorangestellt. Element, das die entsprechende Nummer enthält.

$(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>');
      });
    });
  }
});

Durch die Implementierung eines dieser Ansätze können Sie verschachtelte, geordnete Listen mit konsistenter Nummerierung erstellen und so eine organisiertere und strukturiertere Präsentation Ihres Inhalts ermöglichen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich verschachtelte geordnete Listen in HTML mit konsistenter Nummerierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!