在 JavaScript 中创建具有给定深度的嵌套列表项

Question

我正在尝试使用以下数据制作嵌套列表项：

当深度按 -1 +1 排序时，它会创建正确的缩进，但我无法进行完美的缩进。任何帮助将不胜感激。

const data = [ 
 {depth: 1, title: "Some Title Goes Here - First Title", url: "#some-title-goes-here-first-title-prs7ztig15"},
 {depth: 2, title: "Yuck Almost Got it!", url: "#yuck-almost-got-it-qlx0i4727h"},
 {depth: 1, title: "Whoops! Something went Wrong", url: "#whoops-something-went-wrong-qoflcur4iw"},
 {depth: 1, title: "Don't Worry We Get You Covered", url: "#dont-worry-we-get-you-covered-ug4kxqz4kp"},
 {depth: 3, title: "I Hate Writing Titles", url: "#i-hate-writing-titles-jrlw78vulm"},
 {depth: 4, title: "Gonna Start to Lorem", url: "#gonna-start-to-lorem-whzh8e3qus"},
 {depth: 2, title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, voluptate!", url: "#lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit-quisquam-voluptate-agxlhkvs8c"},
 {depth: 1, title: "Consectetur adipisicing elit. Quo, corporis!", url: "#consectetur-adipisicing-elit-quo-corporis-4xurvdulcn"},
 {depth: 1, title: "Dolor sit amet, consectetur adipisicing elit. Fugiat, quae?", url: "#dolor-sit-amet-consectetur-adipisicing-elit-fugiat-quae-txu46oaitk"},
 {depth: 2, title: "Adipisicing elit. Dolor, rem.", url: "#adipisicing-elit-dolor-rem-x6coih7o36"},
 {depth: 3, title: "Elit. Consequuntur, cum.", url: "#elit-consequuntur-cum-zqyhfglbd4"},
 {depth: 4, title: "Ipsum dolor sit amet.", url: "#ipsum-dolor-sit-amet-sz09eh07ma"},
 {depth: 2, title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, corporis!", url: "#lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit-quo-corporis-18g13jn4j5"}]


function getTOCOutput(data) {
  if (data.length < 1) return '';
  let tocOutput = "<ul>";
  let currentDepth = data[0].depth;
  let c = data.length;

  for (let i = 0; i < c; i++) {
    let itemDepth = data[i].depth;
    if (currentDepth === itemDepth) {
      tocOutput += '<li><a href="' + data[i].url + '">' + data[i].title + '</a>';
    } else if (currentDepth < itemDepth) {
      tocOutput += '<ul><li><a href="' + data[i].url + '">' + data[i].title + '</a>';
    } else {
      tocOutput += '</li>' + '</ul>'.repeat(currentDepth - itemDepth) + '<li><a href="' + data[i].url + '">' + data[i].title + '</a></li>';
    }
    currentDepth = data[i].depth;
  }
  tocOutput += "</ul>";
  return tocOutput;
}
document.body.innerHTML += getTOCOutput(data);

Answer 1

您可以在 for 循环内使用两个 while 循环来考虑深度变化。他们重复直到当前深度正确：

function getTOCOutput(data) {
    let currentDepth = 0;
    let tocOutput = "";
    for (let {depth, title, url} of data) {
        while (depth > currentDepth) {
            tocOutput += "<ul>";
            currentDepth++;
        }
        while (depth < currentDepth) {
            tocOutput += "</ul>";
            currentDepth--;
        }
        tocOutput += '<li><a href="' + url + '">' + title + '</a>';
    }
    return tocOutput;
}

let data = [{depth: 1, title: "Some Title Goes Here - First Title", url: "#some-title-goes-here-first-title-prs7ztig15"},{depth: 2, title: "Yuck Almost Got it!", url: "#yuck-almost-got-it-qlx0i4727h"},{depth: 1, title: "Whoops! Something went Wrong", url: "#whoops-something-went-wrong-qoflcur4iw"},{depth: 1, title: "Don't Worry We Get You Covered", url: "#dont-worry-we-get-you-covered-ug4kxqz4kp"},{depth: 3, title: "I Hate Writing Titles", url: "#i-hate-writing-titles-jrlw78vulm"},{depth: 4, title: "Gonna Start to Lorem", url: "#gonna-start-to-lorem-whzh8e3qus"},{depth: 2, title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, voluptate!", url: "#lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit-quisquam-voluptate-agxlhkvs8c"},{depth: 1, title: "Consectetur adipisicing elit. Quo, corporis!", url: "#consectetur-adipisicing-elit-quo-corporis-4xurvdulcn"},{depth: 1, title: "Dolor sit amet, consectetur adipisicing elit. Fugiat, quae?", url: "#dolor-sit-amet-consectetur-adipisicing-elit-fugiat-quae-txu46oaitk"},{depth: 2, title: "Adipisicing elit. Dolor, rem.", url: "#adipisicing-elit-dolor-rem-x6coih7o36"},{depth: 3, title: "Elit. Consequuntur, cum.", url: "#elit-consequuntur-cum-zqyhfglbd4"},{depth: 4, title: "Ipsum dolor sit amet.", url: "#ipsum-dolor-sit-amet-sz09eh07ma"},{depth: 2, title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, corporis!", url: "#lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit-quo-corporis-18g13jn4j5"},];

document.body.insertAdjacentHTML("beforeend", getTOCOutput(data));

在 JavaScript 中创建具有给定深度的嵌套列表项

Create nested list items with given depths in JavaScript

javascript

indentation