Question

因此，我尝试创建一个Thymeleaf循环，其中包含n个元素的列表。我每第四个（从第一个开始）都会创建一个父元素，并且每个元素都会添加到该元素中，直到创建新的父元素为止。

所以这个主意是

for e : elements {
   if index % 4 = 0 {
       create new parent
   }
   add e to parent
}

我正试图在Thymeleaf中实现此功能，但无法正常工作。这是我想得到的最接近的（内部循环导致“ IllegalStateException：无索引”）：

             <div th:each="metric, rowStatus : ${metrics}"
                class="row tile_count" th:if="${rowStatus.index % 4} == 0">
                <div th:each="i: ${#numbers.sequence(rowStatus.index , rowStatus.index +4)}"
                   th:replace="layouts/template.html :: metricCard(name=${metrics[i].name}, value=${metrics[i].value},description=${metrics[i].description}, severity=${metrics[i].severity})"></div>
             </div>

所需的html可以满足以下要求：

  <div class="row tile_count">
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total HR1 Files</span>
      <div class="count">17</div>
      <span class="count_bottom"><i class="green"><i class="fa"></i></i> Same as last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Transactions</span>
      <div class="count green"> 7,353</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-clock-o"></i> Average Processing Time</span>
      <div class="count">43 sec</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Failed Transactions</span>
      <div class="count">0</div>
      <span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Loaded Transactions</span>
      <div class="count">7,353</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>21% </i> From last Week</span>
    </div>
  </div>
  <div class="row tile_count">
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total HR2 Files</span>
      <div class="count">05</div>
      <span class="count_bottom"><i class="green"><i class="fa"></i></i> Same as last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Transactions</span>
      <div class="count green">5,421</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>10% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-clock-o"></i> Average Processing Time</span>
      <div class="count">10 sec</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
    </div>

    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Failed Transactions</span>
      <div class="count">2</div>
      <span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Total Loaded Transactions</span>
      <div class="count">5,419</div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>10% </i> From last Week</span>
    </div>
  </div>

Answer 1

您可以这样尝试th:remove：

<th:block th:each="metric, iterStat : ${metrics}">
<div class="row tile_count" th:remove="${iterStat.index % 4 == 0 ? none : tag}">
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      ...
    </div>
</div>
</th:block>

Answer 2

您也可以尝试以下操作：

 <div class="row pt-5" th:remove="${status.index%4 == 0} ?  none : tag">

    <div class="col">...</div>

 <th:block th:if="${status.index eq 4}" th:utext="'</div>'" />

我使用了此功能，因为删除“标签”功能不会从我的行中删除结束div。

Thymeleaf每n个元素开始新的一行

2 个答案: