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>