Thymeleaf/jQuery分数显示异常：配料列表重复渲染每行递减如何解决？

架构老林

2026-5-25

解决Thymeleaf配料列表每行递减的问题

嘿，你遇到的这个配料列表每行递减、重复显示的问题，本质是循环标签的嵌套位置错误导致的，完全可以仅通过Thymeleaf来修复，具体方案如下：

问题根源

你现在的代码大概率是把遍历配料的循环放在了列表容器（比如<ol>）或者外层父元素上，甚至嵌套了不必要的循环，导致每循环一次就生成一个包含部分配料的列表，最终出现“第一行全显示、后续行逐个递减”的情况。

错误写法示例（导致问题的典型情况）

比如你可能写成了类似这样的代码：

<!-- 错误：把<ol>放在循环里，每次循环生成新列表，且子列表长度递减 -->
<div th:each="item, stat : ${ingredients}">
  <ol class="list-group">
    <li th:each="ingredient : ${ingredients.subList(0, ingredients.size() - stat.index)}"
        th:text="${ingredient.name + ' ' + convertToFraction(ingredient.quantity)}"></li>
  </ol>
</div>

这种写法会让每轮循环生成一个长度递减的配料列表，自然就出现了你看到的异常。

正确的Thymeleaf实现方案

核心是把遍历指令th:each直接放在单个列表项<li>上，让每个配料对应一个独立的<li>，所有<li>都归属于同一个<ol>容器：

<ol class="list-group">
  <!-- 正确：每个配料生成一个<li>，单独占一行 -->
  <li th:each="ingredient : ${ingredients}"
      class="list-group-item"
      th:text="${ingredient.name + ' ' + convertToFraction(ingredient.quantity)}"></li>
</ol>

这样写的话，Thymeleaf会遍历你的配料列表，每遍历到一个配料就生成一行<li>，完美实现“每种配料单独显示一行”的需求，同时不会出现重复递减的问题。