Rails - 在递增列表中的行时更新标题

时间:2016-01-31 01:12:04

标签: ruby-on-rails ruby twitter-bootstrap list increment

在我看来,我想在列表中生成一定数量的行。设定的次数由以下代码中的chosen_award属性表示:

                <%= current_user.chosen_award.times do %>
                   <li class="list-group-item">
                     <a href="/personal_entry">Week *INCREMENT ME*</a>
                   </li>    
                <% end %>

我想使用bootstrap list-group-item,但我需要为每一行创建一个不同的标题。对于第一行,我希望标题为第1周,对于第二行,我希望标题为第2周,第三周标题应为第3周等。

我可以在rails视图中执行此操作吗?

1 个答案:

答案 0 :(得分:5)

是。 <style> .breadcrumb { list-style: none; overflow: hidden; font: 18px Helvetica, Arial, Sans-Serif; } .breadcrumb li { float: left; } .breadcrumb li a { color: white; text-decoration: none; padding: 10px 0 10px 55px; background: brown; /* fallback color */ background: hsla(34,85%,35%,1); position: relative; display: block; float: left; } .breadcrumb li a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-right: 30px solid hsla(34,85%,35%,1); position: absolute; top: 50%; margin-top: -50px; right: 100%; z-index: 2; } .breadcrumb li a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-right: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-right: 1px; right: 100%; z-index: 1; } .breadcrumb li:first-child a { padding-right: 10px; } .breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); } .breadcrumb li:nth-child(2) a:after { border-right-color: hsla(34,85%,45%,1); } .breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); } .breadcrumb li:nth-child(3) a:after { border-right-color: hsla(34,85%,55%,1); } .breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); } .breadcrumb li:nth-child(4) a:after { border-right-color: hsla(34,85%,65%,1); } .breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); } .breadcrumb li:nth-child(5) a:after { border-right-color: hsla(34,85%,75%,1); } .breadcrumb li a:hover { background: hsla(34,85%,25%,1); } .breadcrumb li a:hover:after { border-right-color: hsla(34,85%,25%,1) !important; } </style> <div id="page-wrap"> <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Vehicles</a></li> <li><a href="#">Vans</a></li> <li><a href="#">Camper Vans</a></li> <li><a href="#">1989 VW Westfalia Vanagon</a></li> </ul> </div> 方法有一个可以使用的索引

.times