Bagaimana untuk Nomborkan Senarai Tertib Bersarang Secara Berurutan dalam HTML?

Cara Nomborkan Senarai Tertib Bersarang dalam HTML

Dalam HTML, senarai tersusun bersarang biasanya dipaparkan dengan penomboran bersarang. Secara lalai, setiap tahap bersarang bermula dari 1 lagi. Walau bagaimanapun, adalah wajar untuk menomborkan elemen bersarang secara berurutan.

Pendekatan CSS (Berfungsi dalam penyemak imbas moden)

Untuk mencapai penomboran berjujukan, anda boleh menggunakan jenis gaya senarai CSS dan balas- sifat kenaikan:

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

Kaedah ini mentafsir kandungan tag ol sebagai senarai ringkas, membenarkan penomboran berurutan. Dalam penyemak imbas, ia akan memaparkan senarai tertib bersarang seperti berikut:

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

Pendekatan jQuery (Keserasian IE6/7)

Untuk pelayar yang tidak menyokong pendekatan CSS (IE6/7 ), anda boleh menggunakan jQuery untuk menambah penomboran yang dikehendaki:

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

Kod JavaScript ini menyasarkan pelayar yang tidak disokong dan mengubah suai struktur senarai tidak tertib untuk mencapai penomboran yang dikehendaki. Dalam penyemak imbas ini, ia akan memaparkan senarai tertib bersarang seperti berikut:

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

Dengan menggabungkan kedua-dua pendekatan, anda boleh memastikan senarai tersusun bersarang dinomborkan secara berurutan dalam semua penyemak imbas utama.

Atas ialah kandungan terperinci Bagaimana untuk Nomborkan Senarai Tertib Bersarang Secara Berurutan dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!