Как написать древовидную структуру отступов html элементов

Question

Есть структура код ниже.

Надо реализовать древовидную структуру отступов html элементов.

То есть:У номера 1 не должен быть отступов а у 1.1 10 пикселей 1.1.1 20 пикселей 1.2 опять 10 пикселей и т.д.

Все что у меня получилось внизу.

const links = document.querySelectorAll(".nav-link");

[...links].reduce((acc, val) => {
  let counter = 0;
  if (acc.textContent[counter] === val.textContent[counter]) {
    if (acc.style.paddingLeft === "10px") {
      val.style.paddingLeft = "20px";
    } else {
      val.style.paddingLeft = "10px";
    }
  }
  return (acc = val);
});

a {
  list-style: none;
}
.doc-menu .nav-link {
  display: block;
  padding: 2px;
  color: #616670;
}

<nav id="doc-menu" class="nav doc-menu flex-column sticky">
  <a class="nav-link scrollto" href="#section-2">1 aa 5</a>
  <a class="nav-link scrollto" href="#section-3">1.1 bbb</a>
  <a class="nav-link scrollto" href="#section-4">1.1.1 addasdasd </a>
  <a class="nav-link scrollto" href="#section-4">1.1.1.1 test </a>
  <a class="nav-link scrollto" href="#section-5"
    >2 some</a
  >
  <a class="nav-link scrollto" href="#section-6">2.1 bulso</a>
  <a class="nav-link scrollto" href="#section-9">2.1.1 bazuk</a>
  <a class="nav-link scrollto" href="#section-13">2.2 zept</a>
</nav>

Тут я понимаю что надо удваивать результат переменной пиксели но не понимаю как это правильно сделать чтобы при добавлении 1.1.1.1 (или еще больше чисел) все работало без дополнительных проверок на ифы. Попробовал еще так написать также неудачно.

[...links].reduce((acc, val) => {
  let counter = 0;
  let px = 10;
  if (acc.textContent[counter] === val.textContent[counter]) {
    const accPad = +acc.style.paddingLeft.split("px")[0];
    const valPad = +val.style.paddingLeft.split("px")[0];
    if (accPad > valPad) {
      val.style.paddingLeft = px * 2 + "px";
    } else {
      val.style.paddingLeft = px + "px";
    }
  }
  return (acc = val);
});

Upd: Как видите отступ блока 1.1.1.1 эквивалентен отступу блока 1.1 что не правильно.

Answer 1

Попробуйте сделать таким образом. Просто бьём значение по пробелу и считаем кол-во символов!

const links = document.querySelectorAll(".nav-link");

[...links].forEach(val => {
  const current = val.textContent.split(' ').shift();
  val.style.paddingLeft += `${(current.length - 1)* 10}px`;
});

a {
  list-style: none;
}
.doc-menu .nav-link {
  display: block;
  padding: 2px;
  color: #616670;
}

<nav id="doc-menu" class="nav doc-menu flex-column sticky">
  <a class="nav-link scrollto" href="#section-2">1 aa 5</a>
  <a class="nav-link scrollto" href="#section-3">1.1 bbb</a>
  <a class="nav-link scrollto" href="#section-4">1.1.1 addasdasd </a>
  <a class="nav-link scrollto" href="#section-5"
    >2 some</a
  >
  <a class="nav-link scrollto" href="#section-6">2.1 bulso</a>
  <a class="nav-link scrollto" href="#section-9">2.1.1 bazuk</a>
  <a class="nav-link scrollto" href="#section-13">2.2 zept</a>
</nav>

БЛОГ НА HUSL

Как написать древовидную структуру отступов html элементов

Ответы (1 шт):