forloop生成无序列表的输出

Question

我想为我的css标签界面生成一个无序列表。我已经采取了给我的例子，并插入适当的行来生成代码，但标签标题只创建一次。我期待通过使用forloop的4个标签标题，如果我使用标准表，这将起作用。

这就是输出端看起来像：http://imgur.com/a/WVRXX

它的预期输出如下：http://imgur.com/8xptd

这里是生成的HTML输出：http://pastebin.com/jLf1cvYM

我如何获得forloop来产生我的预期结果？我在这里不知所措。

<div class="standard-tabs"> 
{% for vdev in pool.vdevs.all %} 
{% for disk in vdev.disks.all %} 

     <!-- Tabs Headings --> 
     <ul class="tabs"> 
     {% if forloop.first %} 
       <li><a href="#{{ vdev.name }}">{{ vdev.name }}</a></li> 
     {% else %} 
     {% endif %} 
     </ul> 

     <!-- Tab Content --> 
     <div class="tabs-content"> 
       <div id="#{{ vdev.name }}" class="with-padding"> 
         {{ disk.serial }} 
       </div> 

{% endfor %} 
{% endfor %} 
</div> 

这是我一直在努力关闭例如：

<!-- Wrapper, set tabs style class here --> 
<div class="standard-tabs"> 

    <!-- Tabs --> 
    <ul class="tabs"> 
     <li class="active"><a href="#tab-1">Selected tab</a></li> 
     <li><a href="#tab-2">Another tab</a></li> 
     <li><a href="#tab-3">Another tab</a></li> 
     <li class="disabled"><a href="#tab-4">Disabled tab</a></li> 
     <li>Non-active</li> 
    </ul> 

<!-- Content --> 
<div class="tabs-content"> 

    <div id="tab-1" class="with-padding"> 

     Selected tab 

    </div> 

    <div id="tab-2" class="with-padding"> 

     Alternate tab 

    </div> 

    <div id="tab-4" class="with-padding"> 

     Disabled tab 

    </div> 

    </div> 

</div> 

Answer 1

这只脏修复。它可能无法正常工作，但我可以看到你有一个错误。在校正模板下面：

<!-- language-all: lang-html --> 
<div class="standard-tabs"> 
     <!-- Tabs Headings --> 
     <ul class="tabs"> 
{% for vdev in pool.vdevs.all %} 
     {% if forloop.first %} 
       <li class="active"><a href="#{{ vdev.name }}">{{ vdev.name }}</a></li> 
     {% else %} 
       <li><a href="#{{ vdev.name }}">{{ vdev.name }}</a></li> 
     {% endif %} 
{% endfor %} 
     </ul> 

     <!-- Tab Content --> 
     <div class="tabs-content"> 
      {% for vdev in pool.vdevs.all %} 
       <div id="#{{ vdev.name }}" class="with-padding"> 
        {% for disk in vdev.disks.all %} 
         {{ disk.serial }} <br /> 
        {% endfor %} 
       </div> 
      {% endfor %} 
     </div> 
</div>