Wie nummeriere ich verschachtelte geordnete Listen mit fortlaufender Zählung in HTML?

Anzahl verschachtelter geordneter Listen in HTML

Sie haben eine verschachtelte geordnete Liste und möchten die zweite Ebene verschachtelter Elemente ändern. Die Nummerierungsmethode ermöglicht es ihm, die Zahl von der vorherigen Ebene zu erben und weiter zu zählen. Derzeit beginnen die Elemente der zweiten Ebene wieder bei 1 zu zählen, aber Sie möchten, dass sie in Dezimalzahlen nummeriert werden, z. B. 2,1, 2,2 und 2,3.

Dieses Problem kann gelöst werden durch:

CSS-Lösung (alle modernen Browser)

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

Dieses CSS verwendet einen Zählermechanismus, Zahlen verwalten für jede Verschachtelungsebene. Es funktioniert in allen modernen Browsern einwandfrei.

JQuery-Lösung kompatibel mit IE6/7

Für Internet Explorer 6/7 funktioniert die reine CSS-Lösung nicht. Daher ist ein Fallback-Mechanismus erforderlich:

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

Dieser jQuery-Code fügt Zahlen zu Internet Explorer 6/7-Browsern hinzu. Es fügt einen Span vor dem Element ein, das die verschachtelte Zahl enthält.

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