一貫した番号付けを使用して HTML でネストされた順序付きリストを作成する方法

番号付き HTML のネストされた順序付きリスト

HTML でネストされた順序付きリストを作成すると、内部リストに番号が付けられるという問題が発生する可能性があります。また1から。これにより、リストの適切なフローが中断される可能性があります。これに対処するには、次の CSS および jQuery テクニックを使用できます。

CSS アプローチ

CSS スタイルをサポートするブラウザの場合、counter-reset プロパティを使用してリストの各レベルの番号付けをリセットします。 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;
}

jQuery アプローチ

カウンターをサポートしていない IE6/7 などの古いブラウザの場合は、プロパティをリセットすると、jQuery を使用して番号付けを手動で挿入できます。この方法では、各項目の先頭に を追加します。それぞれの番号を含む要素。

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

これらのアプローチのいずれかを実装すると、一貫した番号付けを持つネストされた順序付きリストを実現でき、コンテンツをより組織的かつ構造化したプレゼンテーションを提供できます。

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