时间戳

首页 > 解决方案 > 使用 Javascript Vanilla 将级别类添加到嵌套列表

javascript - 使用 Javascript Vanilla 将级别类添加到嵌套列表

问题描述

我试图将级别分类添加到具有嵌套列表项的列表中。我想要以下结构。

<ul class="parent parent-level-1">
  <li class="child child-level-1"><a>Title level 1</a></li>
  <li class="child child-level-1"><a>Title level 1</a>
    <ul class="parent parent-level-2">
      <li class="child child-level-2"><a>Title level 2</a>
        <ul class="parent parent-level-3">
          <li class="child child-level-3"><a>Title level 3</a></li>
          <li class="child child-level-3"><a>Title level 3</a></li>
        </ul>
      </li>
      <li class="child child-level-2"><a>Title level 2</a>
        <ul class="parent parent-level-3">
          <li class="child child-level-3"><a>Title level 3</a></li>
          <li class="child child-level-3"><a>Title level 3</a></li>
          <li class="child child-level-3"><a>Title level 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="child child-level-1"><a>Title level 1</a>
    <ul class="parent parent-level-2">
      <li class="child child-level-2"><a>Title level 2</a></li>
    </ul>
  </li>
  <li class="child child-level-1"><a>Title level 1</a></li>
  <li class="child child-level-1"><a>Title level 1</a>
    <ul class="parent parent-level-2">
      <li class="child child-level-2"><a>Title level 2</a></li>
    </ul>
  </li>
</ul>

如您所见，父列表中有一些嵌套列表，它们同时可能包含另一个嵌套列表。我尝试了以下 Javascript 函数，其中parent是主列表的父级，第一级为整数，可以是 0 或 1。

function addLevelClass(parent, level) {
  const iteration = parent.querySelectorAll("ul");

  const firstUL = parent.querySelector("ul");
  firstUL.classList.add("parent", "parent-level-" + level);

  const firstItems = parent.querySelectorAll("li");

  console.info(firstItems);

  // No point if no list items.
  if (!firstItems.length) {
    return;
  }

  //loop trough fisrt-level li
  for (let c = 0; c < firstItems.length; c++) {
    const childrenLi = firstItems[c];

    //add a child class to the li
    childrenLi.classList.add("child", "child-level-" + level);
  }

  // No point if no list items.
  if (!iteration.length) {
    return;
  }
  for (let g = 0; g < iteration.length; g++) {
    const levelIncrement = level + g;

    const parentUL = iteration[g].querySelector("ul");

    //add a parent class to the ul
    parentUL.classList.add(
      "parent",
      "parent-level-" + (level + levelIncrement)
    );

    //fetch all the li's that are direct children of the ul
    const childItems = parentUL.querySelectorAll("li");

    // No point if no list items.
    if (!childItems.length) {
      return;
    }

    //loop trough each li
    for (let c = 0; c < childItems.length; c++) {
      const childrenLi = childItems[c];

      //add a child class to the li
      childrenLi.classList.add(
        "child",
        "child-level-" + (level + levelIncrement)
      );
    }
  }
}

该函数在 3er 级别的某处丢失，并且无法为列表的其余部分设置级别。

标签： javascriptecmascript-2016

解决方案

理解这个问题的最好方法是 HTML 结构是一个 Tree 数据结构（实际上它是一个 DAG，如果你想进一步研究的话）。

这些问题是数据结构 CS101 的一部分（以及如何遍历/搜索）。提供的解决方案是 DFS。

但是，要解决此问题，您需要考虑recursion.

即给出以下的树结构

| root
|
|- leaf node
|- node with children
 |- leaf node

所以这个想法是你首先找到根节点的地方。你在这里寻找document.querySelector('ul')

然后你要在root ul. 在这里你会做类似的事情document.querySelector('ul > li')。这为您提供了根中现有的子节点。

从那里开始-您需要将父级与子级切换以递归地执行操作。

我将在下面提供一个示例：

// helper fn
const findChildren = el => [...el.children].filter(el => el.tagName === "LI")

const root = document.querySelector("ul");
const children = findChildren(root);


const traverse = (baseNode, children, iter = 1) => {
  // process baseNode here with iter here
  baseNode.classList.add(`list-${iter.toString()}`)

  for (child of children) {
     child.classList.add(`child-${iter.toString()}`)
     let hasGranChild = [...child.children].filter(el => el.tagName === "UL").length

     if (hasGranChild) {
       let newChild = [...child.children].find(el => el.tagName === "UL");
       const granChildren = findChildren(newChild)

       traverse(newChild, granChildren, iter + 1)
     }
  }
}

traverse(root, children)
<ul>
  <li><a>Title level 1</a></li>
  <li><a>Title level 1</a>
    <ul>
      <li><a>Title level 2</a>
        <ul>
          <li><a>Title level 3</a></li>
          <li><a>Title level 3</a></li>
        </ul>
      </li>
      <li><a>Title level 2</a>
        <ul>
          <li><a>Title level 3</a></li>
          <li><a>Title level 3</a></li>
          <li><a>Title level 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a>Title level 1</a>
    <ul>
      <li><a>Title level 2</a></li>
    </ul>
  </li>
  <li><a>Title level 1</a></li>
  <li><a>Title level 1</a>
    <ul>
      <li><a>Title level 2</a></li>
    </ul>
  </li>
</ul>

结果

<ul class="list-1">
  <li class="child-1"><a>Title level 1</a></li>
  <li class="child-1"><a>Title level 1</a>
    <ul class="list-2">
      <li class="child-2"><a>Title level 2</a>
        <ul class="list-3">
          <li class="child-3"><a>Title level 3</a></li>
          <li class="child-3"><a>Title level 3</a></li>
        </ul>
      </li>
      <li class="child-2"><a>Title level 2</a>
        <ul class="list-3">
          <li class="child-3"><a>Title level 3</a></li>
          <li class="child-3"><a>Title level 3</a></li>
          <li class="child-3"><a>Title level 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="child-1"><a>Title level 1</a>
    <ul class="list-2">
      <li class="child-2"><a>Title level 2</a></li>
    </ul>
  </li>
  <li class="child-1"><a>Title level 1</a></li>
  <li class="child-1"><a>Title level 1</a>
    <ul class="list-2">
      <li class="child-2"><a>Title level 2</a></li>
    </ul>
  </li>
</ul>

在函数的递归性质内，您可以在函数参数中传入当前“级别”。通过设置起点iter = 1，您不在乎树有多“深”。当您使用 CSS 选择器直接子代（即el1 > el2）时，您可以给我直接子代el1 which are el2吗？

推荐阅读