【javascript】ぶつ切りになった複数の連番リストの番号を通す

こんな感じの目次を作ることが稀によくあります。

素直に html を書いて start 属性を指定してやればいい話ではありますが、リストをいじるたびに数値を修正するのはミスの原因にもなりますし、せっかく markdown で気軽に書けるときにそこだけ html タグを打つのも億劫です。

という訳で、以下の javascript を差し込んで自動的に番号を通すようにしてみました。

<div class="force-order"> ～ </div> で囲んだ範囲で連番リストの番号が通るようになります。

document.addEventListener("DOMContentLoaded", () => {

  const forceOrder = Array.from(document.querySelectorAll(".force-order"));
  forceOrder.forEach(elm => {
    const startIdx = elm.getAttribute("start") || 1;
    let counter = Number(startIdx);
    Array.from(elm.children).forEach(elm => {
      if (elm.tagName == "OL") {
        elm.start = counter;
        const lis = Array.from(elm.children).filter(c => c.tagName == "LI");
        counter += lis.length;
      }
    });
  });

});

実用性のため、start という属性で開始番号を設定できるようにもしています。

---

リストがネストされている場合に孫要素までカウントしてしまわないよう、children で子要素のみ取得するようにしたのが今回のポイントです。