在胸腺叶上相同html标记中的循环2d数组

Question

我要在胸腺叶中渲染这个html：

 <div id="puzzle">
     <div number="1" class="cell-puzzle row-1 col-1">1</div>
     <div number="2" class="cell-puzzle row-1 col-2">2</div>
     <div number="3" class="cell-puzzle row-1 col-3">3</div>
     <div number="4" class="cell-puzzle row-1 col-4">4</div>
     <div number="5" class="cell-puzzle row-2 col-1">5</div>
     <div number="6" class="cell-puzzle row-2 col-2">6</div>
     <div number="7" class="cell-puzzle row-2 col-3">7</div>
     <div number="8" class="cell-puzzle row-2 col-4">8</div>
     <div number="9" class="cell-puzzle row-3 col-1">9</div>
     <div number="10" class="cell-puzzle row-3 col-2">10</div>
     <div number="11" class="cell-puzzle row-3 col-3">11</div>
     <div number="12" class="cell-puzzle row-3 col-4">12</div>
     <div number="13" class="cell-puzzle row-4 col-1">13</div>
     <div number="14" class="cell-puzzle row-4 col-2">14</div>
     <div number="15" class="cell-puzzle row-4 col-3">15</div>
     <div number="0" class="cell-puzzle row-4 col-4 cell-puzzle-zero"></div>
</div>

以下是对胸腺的实施情况：

<div id="puzzle">
   <span th:each="row,iter  : *{matrix}" >
     <div th:each="col, iter2: ${row}" th:attr="number=${iter.index + 1}" th:class="'cell-puzzle row-' + ${iter.index + 1} + ' col-' + ${iter2.index + 1}" th:text="${col}"></div>
   </span>
<div number="0" class="cell-puzzle row-4 col-4 cell-puzzle-zero"></div>
</div>

我需要将div封装在span中才能有两个th:each

输出html将与原来不同。

当我试图将两个th:each合并到同一个div中时，它会抛出错误：

<div id="puzzle">
     <div th:each="row,iter  : *{matrix}" th:each="col, iter2: ${row}" th:attr="number=${iter.index + 1}" th:class="'cell-puzzle row-' + ${iter.index + 1} + ' col-' + ${iter2.index + 1}" th:text="${col}"></div>
<div number="0" class="cell-puzzle row-4 col-4 cell-puzzle-zero"></div>
</div>

错误：

org.attoparser.ParseException: (Line = 31, Column = 74) Malformed markup: Attribute "th:each" appears more than once in element

我知道另一种方法是将2d数组转换为一维数组，但是我们需要手动计算索引。所以请跳过这条路

有人知道如何只使用胸腺叶在这种情况下吗？

Answer 1

使用<th:block />而不是<span />。你可以在里面放一个th:each，它不会输出任何东西。

<div id="puzzle">
    <th:block th:each="row,iter  : *{matrix}">
      <div th:each="col, iter2: ${row}" th:attr="number=${iter.index + 1}" th:class="'cell-puzzle row-' + ${iter.index + 1} + ' col-' + ${iter2.index + 1}" th:text="${col}"></div>
    </th:block>
    <div number="0" class="cell-puzzle row-4 col-4 cell-puzzle-zero"></div>
</div>