Thymeleaf 循环中的引导面板 - 相同的 id 和 href-前端问题

Bootstrap panels within Thymeleaf loop - same id and href(Thymeleaf 循环中的引导面板 - 相同的 id 和 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?

推荐答案

您可以使用 status 变量 (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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！