javascript - 如何使用 jquery 将简单的 html 列表转换为多级

Question

我有这个代码

在 HTML 中：

<ul>
    <li><a href=''>Item</a></li>
    <li><a href=''>_subitem</a></li>
    <li><a href=''>_subitem</a></li>
    <li><a href=''>_subitem</a></li>
    <li><a href=''>__sub-subitem</a></li>
    <li><a href=''>__sub-subitem</a></li>
</ul>

在浏览器中看起来像这样：

    Item
        _subitem
        _subitem
        _subitem
            __sub-subitem
            __sub-subitem

现在我想要一个jquery解决方案来将上面的代码转换为嵌套的无序 HTML列表，如下所示。

<ul>
    <li>
        <a href=''>Item</a>
        <ul>
            <li><a href=''>subitem</a></li>
            <li><a href=''>subitem</a></li>
            <li>
                <a href=''>subitem</a>
                <ul>
                    <li><a href=''>sub-subitem</a></li>
                    <li><a href=''>sub-subitem</a></li>
                </ul>
            </li>
        <ul>
    </li>
<ul>

请有人帮助我，我没有找到任何解决方案。

Answer 1

我计算 '_' 来查找子项的级别，并将每个级别的父项存储在作为数组的 parentLi 变量中，并将每个子项附加到其父项。

function doIt() {
  let ul = document.createElement("ul");
  let parentLi = [];
  $("ul li a").each(function() {
    let level = ($(this).text().match(/_/g) || []).length;
    if (level === 0) {
      let li = document.createElement("li");
      let a = document.createElement("a");
      a.innerHTML = $(this).text()
      li.append(a);
      parentLi[level + 1] = li;
      ul.append(li);
    } else if (level > 0) {
      let ul = document.createElement("ul");
      let li = document.createElement("li");
      let a = document.createElement("a");
      a.innerHTML = $(this).text().replaceAll('_', '')
      li.append(a);
      parentLi[level + 1] = li;
      ul.append(li);
      parentLi[level].append(ul);
    }
  });
  $('#menu').append(ul);
};

doIt();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href=''>Item</a></li>
  <li><a href=''>_subitem</a></li>
  <li><a href=''>__sub-subitem</a></li>
  <li><a href=''>__sub-subitem</a></li>
  <li><a href=''>_subitem</a></li>
  <li><a href=''>_subitem</a></li>
  <li><a href=''>Item1</a></li>
  <li><a href=''>_subitem</a></li>
  <li><a href=''>__sub-subitem</a></li>
  <li><a href=''>__sub-subitem</a></li>
  <li><a href=''>_subitem</a></li>
  <li><a href=''>_subitem</a></li>
  <li><a href=''>__sub-subitem</a></li>
  <li><a href=''>__sub-subitem</a></li>
</ul>


<div id='menu'></div>