Question

我有这个问题，我需要找到嵌套列表，即。

<ul>
  <li>A
    <ul>
      <li>B
        <ul>
          <li>C
            <ul>
              <li>D</li>
              <ul>
                <li>E</li>
              </ul>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

我应该得到一个ABC的输出，但我所追求的是能够继续深入到列表中，无论有多少。我的尝试一直导致最大调用堆栈超出错误。

我的计划是检测父母是否有带有标签的孩子，如果是，则将其作为要求更深入地返回。但每次我一直试图在代码中写出这个，我不是在编写递归部分，我只是更深入地复制代码（嵌套）。

这是一个示例尝试：

假设上面是由JavaScript / jQuery作为DOM内容访问的HTML，我得到每个级别的子项，例如。在第一次之后

。

if (jQuery(inpLine).is('ul')) {
  // note the depth and that this has ul, return as object
}

然后上面会触发一个更深入的函数，这是我遇到问题的地方，因为我会尝试调用函数本身，但之后会丢失跟踪/调用堆栈。与使用辅助功能相同。

我意识到有一个serializeArray方法，假设你每行有一个输入。

我不知道我想自己解决这个问题，我只是感到愚蠢，我无法解决它，就像我无法克服的砖墙一样。

我简单地阅读了它并看到了一些关于蹦蹦跳跳的事情，这听起来就像我在追踪当前深度/值时所做的那样，然后用值来反过来并将这些部分连接在一起。

这是一个简单的例子，在我正在处理的特定应用程序中，每个组都可以有输入/其他类型的值，我需要按顺序抓取，我没有问题，它是嵌套。< / p>

任何提示/阅读材料都会有所帮助。我最终会弄清楚，我想哈哈，谢天谢地，它现在不是必须解决的。

Answer 1

你不需要递归。 DOM已经按深度优先顺序列出了元素，因此使用选择器（在li元素上）将以正确的顺序返回这些元素。

剩下的就是检索文本内容并连接结果。

这是ES3 jQuery代码和普通ES6中的解决方案：

// Plain ES6
var result = Array.from(document.querySelectorAll('li'), li =>
    [...li.childNodes].filter(node => node.nodeType === 3)
            .map(node => node.nodeValue.trim()).join('')
).join(',');

console.log(result);

// jQuery & ES3
var result = $.map($('li'), function(li) {
    return $.map($(li).contents().filter(function () {
        return this.nodeType === 3;
    }), function (node) {
        return node.nodeValue.trim();
    }).join('')
}).join(',');

console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>A
    <ul>
      <li>B
        <ul>
          <li>C
            <ul>
              <li>D</li>
              <ul>
                <li>E</li>
              </ul>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

JavaScript在寻找嵌套列表时进行递归解析？

1 个答案: