Question

我希望实现以下目标：

使用一些后端逻辑来生成代表目录结构的JSON。
将此JSON传递给JavaScript函数，以创建表示目录结构的HTML。

我要生成的HTML如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
   <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> 
</head>
<body>
  
  <h1>Contents of "Some"</h1>

  <ul>
    <li data-toggle="collapse" data-target="#first">Collapsible </li>
      <ul id="first" class="collapse">
        <li>Lorem ipsum dolor text....</li>
        <li>Lorem ipsum dolor text....</li>
        <li>Lorem ipsum dolor text....</li>
          <li data-toggle="collapse" data-target="#sub">Collapsible</li>
            <ul id="sub" class="collapse">
              <li>Lorem ipsum dolor text....</li>
              <li>Lorem ipsum dolor text....</li>
              <li>Lorem ipsum dolor text....</li>
            </ul> 
      </ul> 
    <li> File 1</li>
    <li> File 2</li>
    <li> File 3</li>
  </ul>

 
</body>
</html>

要生成此代码，我假设后端程序可以生成如下的JSON：

    <script>
      var tree = [
        {'name': 'file1',
         'type': 'file',
         'url': 'https://www.google.com'
        },
        {'name': 'file2',
         'type': 'file',
         'url': 'https://www.google.com'
        },
        {'name': 'file1',
         'type': 'file',
         'url': 'https://www.google.com'
        },
        {'name': 'directory1',
         'type': 'folder',
         'url': 'https://www.google.com',
         'contents': [
            {'name': 'file1',
             'type': 'file',
             'url': 'https://www.google.com'
            },
            {'name': 'file2',
             'type': 'file',
             'url': 'https://www.google.com'
            },
           ]
        },
      ]

上述情况下的URL将由一些自定义URL替换，从而使人们能够下载文件。这与眼前的问题无关。

现在，为了生成最终的HTML代码，我一直试图在Javascript中使用递归来构造DOM结构。但是由于某种原因，我无法弄清楚，最终我构造了一个无限的DOM。这是我目前的尝试。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>

<body>
  <script>
    var tree = [{
        'name': 'file1',
        'type': 'file',
        'url': 'https://www.google.com'
      },
      {
        'name': 'file2',
        'type': 'file',
        'url': 'https://www.google.com'
      },
      {
        'name': 'file1',
        'type': 'file',
        'url': 'https://www.google.com'
      },
      {
        'name': 'directory1',
        'type': 'folder',
        'url': 'https://www.google.com',
        'contents': [{
            'name': 'file1',
            'type': 'file',
            'url': 'https://www.google.com'
          },
          {
            'name': 'file2',
            'type': 'file',
            'url': 'https://www.google.com'
          },
        ]
      },
    ]
  </script>

  <h1>Contents of "Some"</h1>


  <div id="tree_container">

  </div>

  <script>
    var listContentsOf = function(tree, container = 'tree_container', depth = '1') {
      console.log(tree);
      console.log(container);
      console.log(depth);

      $('#' + container).append('<ul id="' + depth + '"> </ul>');
      for (i = 0; i < tree.length; i++) {
        if (tree[i].type == 'file') {
          $('#' + depth).append('<li>' + tree[i].name + '</li>');
        } else if (tree[i].type == 'folder') {
          $('#' + depth).append('<li>' + tree[i].name + '</li>');
          subID = depth + i;
          $('#' + depth).append('<div id="' + subID + 'holder"> </div>');
          console.log(tree[i].contents);
          console.log(subID + 'holder');
          // listContentsOf(tree[i].contents, subID + 'holder', subID);
        }
      }
    };

    listContentsOf(tree);
  </script>

</body>
<

注释'if else'中的最后一个递归调用，因为它会无限次运行。对于无限执行为何发生以及如何规避无限执行的任何想法，将不胜感激。

Answer 1

您唯一的错误不是递归本身，而是范围，主要是循环中的i变量。由于您没有使用var或let进行定义，因此它是在全局范围内定义的，因此每次迭代都将共享它的值。发生的事情是第二次迭代将i的先前迭代值更改为3，因此它将始终输入第三级（ directory1 ）。使用var或let时，每个i都将在其自己的范围内定义，因此其值将始终可靠。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>

<body>
  <script>
    var tree = [{
        'name': 'file1',
        'type': 'file',
        'url': 'https://www.google.com'
      },
      {
        'name': 'file2',
        'type': 'file',
        'url': 'https://www.google.com'
      },
      {
        'name': 'file1',
        'type': 'file',
        'url': 'https://www.google.com'
      },
      {
        'name': 'directory1',
        'type': 'folder',
        'url': 'https://www.google.com',
        'contents': [{
            'name': 'file1',
            'type': 'file',
            'url': 'https://www.google.com'
          },
          {
            'name': 'file2',
            'type': 'file',
            'url': 'https://www.google.com'
          },
        ]
      },
    ]
  </script>

  <h1>Contents of "Some"</h1>


  <div id="tree_container">

  </div>

  <script>
    var listContentsOf = function(tree, container = 'tree_container', depth = '1') {
      console.log(tree);
      console.log(container);
      console.log(depth);

      $('#' + container).append('<ul id="' + depth + '"> </ul>');
      for (var i = 0; i < tree.length; i++) {
        if (tree[i].type == 'file') {
          $('#' + depth).append('<li>' + tree[i].name + '</li>');
        } else if (tree[i].type == 'folder') {
          $('#' + depth).append('<li>' + tree[i].name + '</li>');
          subID = depth + i;
          $('#' + depth).append('<div id="' + subID + 'holder"> </div>');
          console.log(tree[i].contents);
          console.log(subID + 'holder');
          listContentsOf(tree[i].contents, subID + 'holder', subID);
        }
      }
    };

    listContentsOf(tree);
  </script>

</body>
<

使用Javascript / jQuery / JSON生成HTML以表示目录树

1 个答案: