更改DIV ID使用引導崩潰項目做環

Question

Im和已經建立了這樣的代碼：

<% @tasks.each do |task| %> 
    <div class="panel-group"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" href="#collapse1"><%= task.title %><p style="text-align:right;"><span class="glyphicon glyphicon-chevron-down"></span></p></a> 
      <p class="taskdescription"><%= task.description %></p> 
     </h4> 
     </div> 
     <div id="collapse1" class="panel-collapse collapse"> 
     <ul class="list-group"> 
      <% task.subtasks.each do |subtask| %> 
      <li class="list-group-item"><%= subtask.title %></li> 
      <% end %> 
     </ul> 
     </div> 
    </div> 
    </div> 
<% end %> 

這是輸出正確的名單，但每個項目我需要增加的價值DIV：

<div id="collapse1" class="panel-collapse collapse"> 

到

<div id="collapse2" class="panel-collapse collapse"> 

然後

<div id="collapse3" class="panel-collapse collapse"> 

等等，直到從集合中顯示每個項目。

感謝

Answer 1

使用each_with_index do |element, index| do ....

這是你可以訪問元素索引，並可以使用它作爲變量的任何軌道。

<% @tasks.each_with_index do |task, index| %> 
 
     <div class="panel-group"> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
       <a data-toggle="collapse" href="#collapse1"><%= task.title %><p style="text-align:right;"><span class="glyphicon glyphicon-chevron-down"></span></p></a> 
 
       <p class="taskdescription"><%= task.description %></p> 
 
       </h4> 
 
      </div> 
 
      <div id="collapse<%= index +1 %>" class="panel-collapse collapse"> 
 
       <ul class="list-group"> 
 
       <% task.subtasks.each do |subtask| %> 
 
        <li class="list-group-item"><%= subtask.title %></li> 
 
       <% end %> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <% end %>

Answer 2

可以循環使用each.with_index(1)和使用計數器變量i動態追加上生成的HTML計數器。

<% @tasks.each.with_index(1) do |task, i| %> 
    <div class="panel-group"> 
    <div class="panel panel-default"> 
     ... 
     <div id="collapse#{i}" class="panel-collapse collapse"> 
     ... 
     </div> 
    </div> 
    </div> 
<% end %>