Question

所以假设我有这个目录：

Root
  includes
    header.php
    footer.php
  css
    images
      logos
        white.svg
        dark.svg
      gallery
        1.jpg
        2.jpg
        3.jpg
        4.jpg
        5.jpg
      contact-page.jpg
    style.css
  js
    jquery.js
    main.js
  index.php
  contact.php
  about-us.php

我正在使用另一个堆栈溢出帖子中的this answer递归解析目录。

它返回一个包含所有文件和文件夹的对象的数组，如果它是一个文件夹，那么它就有一个＆＃39; children＆＃39;包含所有子文件或子文件夹的数组。

如何使用<ul>和<li>元素遍历此对象以将其呈现为HTML。我知道它必须使用递归函数，但我无法绕过它。此外，它可以使用jQuery追加元素。

提前致谢！

编辑：http://pastebin.com/iQ3xbKpC有JSON

Answer 1

你可以使用这个递归函数：

＆＃13;

function listHtml(children) {
    return  '<ul>' + children.map(node => 
                '<li>' + node.name +
                    (node.type === 'file' ? '' : listHtml(node.children)) +
                '</li>').join('\n') +
            '</ul>';
}

// Sample data
var data = [ 
    { name: 'Root', type: 'folder', children: [
      { name: 'includes', type: 'folder', children: [
        { name: 'header.php', type: 'file' },
        { name: 'footer.php', type: 'file' },
      ]},
      { name: 'css', type: 'folder', children: [
        { name: 'images', type: 'folder', children: [
          { name: 'logos', type: 'folder', children: [
            { name: 'white.svg', type: 'file' },
            { name: 'dark.svg', type: 'file' },
          ]},
          { name: 'gallery', type: 'folder', children: [
            { name: '1.jpg', type: 'file' },
            { name: '2.jpg', type: 'file' },
            { name: '3.jpg', type: 'file' },
            { name: '4.jpg', type: 'file' },
            { name: '5.jpg', type: 'file' },
          ]},
          { name: 'contact-page.jpg', type: 'file' },
        ]},
        { name: 'style.css', type: 'file' },
      ]},
      { name: 'js', type: 'folder', children: [
        { name: 'jquery.js', type: 'file' },
        { name: 'main.js', type: 'file' },
      ]},
      { name: 'index.php', type: 'file' },
      { name: 'contact.php', type: 'file' },
      { name: 'about-us.php', type: 'file' },
    ]}
];

// transform to HTML
var html = listHtml(data);
// Inject into document
document.body.insertAdjacentHTML( 'beforeend', html );

＆＃13;

如何使用节点中的FS递归呈现目录的树视图

1 个答案: