主页 / 问题 / 1141347
Accepted
Demon __
Asked:2020-06-15 21:45:17 +0800 CST2020-06-15 21:45:17 +0800 CST

如何编写用于缩进 html 元素的树结构

  • 772

下面有一个代码结构。

有必要实现 html 元素缩进的树状结构。

即：数字1不应该有填充和1.110 像素1.1.120 像素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（甚至更多数字）时一切正常，而无需额外检查 ifs。我也试过这样写，但也没有用。

[...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不正确的块缩进。

javascript

1 个回答

  1. Best Answer

    尝试这样做。只需按空格击败值并计算字符数！

    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>

    • 1

相关问题