HTML でネストされた順序付きリストに順番に番号を付ける方法

HTML でネストされた順序付きリストに番号を付ける方法

HTML では、通常、ネストされた順序付きリストはネストされた番号付けで表示されます。デフォルトでは、ネストされた各レベルは再び 1 から始まります。ただし、ネストされた要素に連続的に番号を付けることが望ましい場合があります。

CSS アプローチ (最新のブラウザーで機能します)

連続した番号付けを実現するには、CSS list-style-type と counter- increment プロパティ:

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

このメソッドは、ol タグの内容を単純なリストとして解釈し、連続した番号付けを可能にします。ブラウザでは、次のようにネストされた順序付きリストが表示されます。

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

jQuery アプローチ (IE6/7 互換性)

CSS アプローチをサポートしていないブラウザの場合 (IE6/7) )、jQuery を使用して必要な番号を追加できます:

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

この JavaScript コードは、サポートされていないブラウザーをターゲットにしており、順序なしリスト構造を変更して、目的の番号付けを実現します。これらのブラウザでは、ネストされた順序付きリストが次のように表示されます。

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

両方のアプローチを組み合わせることで、すべての主要なブラウザでネストされた順序付きリストに連続した番号が付けられるようにすることができます。

以上がHTML でネストされた順序付きリストに順番に番号を付ける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。