Thymeleaf循环中的引导面板-相同的ID和href [英] Bootstrap panels within Thymeleaf loop - same id and href
本文介绍了Thymeleaf循环中的引导面板-相同的ID和href的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在Thymeleaf循环中生成引导折叠面板,像这样:
I'm trying to generate bootstrap collapse panels within Thymeleaf loop, like that:
<table>
<tr th:each="p, iterStat : ${completedList}">
<td style="padding: 0 15px 0 15px;">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" th:text="${p.key}">p.k</a>
<span style="float: right;" class="glyphicon glyphicon-ok"></span>
</h4>
</div>
<div th:id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<span th:text="${p.value}"></span>
</div>
</div>
</div>
</td>
</tr>
</table>
但是对于循环的每个元素,我都有相同的id
和href
,因此面板无法正常工作.
But I have the same id
and href
for every element of the loop so the panels doesn't works.
我可以做一些动态更改id
和href
的事情吗?
Can I do something to change dynamically id
and href
?
推荐答案
您可以使用状态变量(iterStat
)为每一行创建唯一的ID:
You can use the status variable (iterStat
) to create a unique id for every row:
<a data-toggle="collapse" data-parent="#accordion" th:href="'#collapse' + ${iterStat.index}" th:text="${p.key}">
和
<div th:id="'collapse' + ${iterStat.index}" class="panel-collapse collapse in">
这篇关于Thymeleaf循环中的引导面板-相同的ID和href的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文