Question

我有以下代码：

nav.nav-buttons
  each val in ["lock", 'monitor', "live", "folder", "video", "script", "presentation", "pack", "checked", "play-simple", "reload", "star", "lock", "tags"]
    a(href="#")!= '<svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-' + val + '"></use></svg>'

下面编译的HTML：

<nav class="nav-buttons"><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-monitor"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-live"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-folder"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-video"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-script"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-presentation"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-pack"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-checked"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-play-simple"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-reload"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-star"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a><a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-tags"></use></svg></a>

我需要正确缩进代码，每个代码都在一个新行上，但我不知道该怎么做。

我需要的代码类似于下面的代码

<nav class="nav-buttons">
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-monitor"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-live"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-folder"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-video"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-script"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-presentation"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-pack"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-checked"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-play-simple"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-reload"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-star"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-tags"></use></svg></a>
</nav>

Answer 1

此代码

- var desc_tags = ["lock", 'monitor', "live", "folder", "video", "script", "presentation", "pack", "checked", "play-simple", "reload", "star", "lock", "tags"].map(function(val){
-    return '<a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-' + val + '"></use></svg></a>'
- });
nav.nav-buttons!= '\n  '+desc_tags.join('\n  ')+'\n'

输出

<nav class="nav-buttons">
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-monitor"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-live"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-folder"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-video"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-script"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-presentation"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-pack"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-checked"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-play-simple"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-reload"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-star"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-lock"></use></svg></a>
  <a href="#"><svg class="icon-svg"><use xlink:href="svg/icons.svg#icon-tags"></use></svg></a>
</nav>

希望它有所帮助。

Answer 2

使用http://www.html2jade.org/并阅读http://jade-lang.com/reference/这两项内容都可以帮助您完成任务。

我如何生成几行的列表？

2 个答案: