Thymeleaf начать новую строку каждые n элементов

Question

Итак, я пытаюсь создать цикл Thymeleaf, в котором есть список из n элементов. Каждый четвертый (начиная с первого) я создаю родительский элемент, и каждый добавляется к нему, пока не будет создан новый родительский элемент.

Итак, идея в том, что

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

Я пытаюсь реализовать это в Thymeleaf и не могу заставить что-либо работать. Вот самое близкое, которое, я думаю, я получил (этот внутренний цикл вызывает "IllegalStateException: No index"):

             <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>