Thymeleaf th：每个带有嵌套 div 的循环都返回错误的对象答案

【问题标题】：Thymeleaf th:each loop with nested div returns wrong objectThymeleaf th：每个带有嵌套 div 的循环都返回错误的对象
【发布时间】：2017-12-29 21:43:22
【问题描述】：

我遇到了 Thymeleaf 循环的问题，它在嵌套的 div 中返回了错误的对象。我希望它返回与顺序表行相对应的对象，而不是返回循环中的第一个对象。下面用 cmets 贴出代码：

<table class="striped responsive-table">
  <thead>
  <th>name</th>
  <th>url</th>
  <th>updated</th>
  <th>author</th>
  </thead>
  <tbody>

  <!-- THE BEGINNING OF THE LOOP-->
  <tr th:each="page : ${pages}">

    <!-- THIS RETURNS THE CORRECT OBJECT AND ATTRIBUTE-->
    <td><strong><span th:text="${page.name}"></span></strong></td>
    <td><a th:href="'/p-' + ${page.url}" class="waves-effect waves-light explode">
      <span th:text="'/p-' + ${page.url}"></span></a></td>
    <td th:text="${page.updated}"></td>
    <td th:text="${page.author.getUsername()}"></td>
    <td style="text-align: right;">
      <a class="btn waves-effect waves-light" th:href="'page-edit-' + ${page.id}">edit</a>
      <a class="waves-effect waves-light btn btn-flat btn-delete view"
         onclick="$('#modal1').modal('open');">delete</a>

      <!-- Modal Structure -->
      <div id="modal1" class="modal">
        <div class="modal-content center">
          <h4 style="color: darkred">Are you sure?</h4>

          <!-- HERE IS MY PROBLEM: THIS RETURNS THE FIRST OBJECT IN THE LOOP EVERY TIME -->
          <p th:text="'Confirm that you want to delete this page: ' + ${page.name}"
             style="color: darkred"></p>
        </div>
        <div class="modal-footer">
          <a href="#" class=" modal-action modal-close waves-effect waves-green btn-flat">CANCEL</a>
          <a th:href="'/page-delete-' + ${page.id}"
             class=" modal-action modal-close waves-effect waves-red btn-flat">DELETE</a>
        </div>
      </div>

      <script>
          $(document).ready(function () {
              $('#modal1').modal();

          });
      </script>
    </td>
  </tr>
  </tbody>
</table>

我该如何解决这个问题？

【问题讨论】：

附带说明，写page.author.username 更惯用（并且使用DELETE 而不是一些临时的“删除URL”）。
知道了，感谢@chrylis 的反馈。

标签： java spring loops nested thymeleaf

【解决方案1】：

您的问题是您在循环内使用id 属性，该属性在整个DOM 中必须是唯一的。您生成的 HTML（您应该直接检查）有重复项，当您的 JavaScript 触发时，浏览器会找到第一个匹配的元素并返回它。

相反，您需要在tr 或按钮上设置data 属性，并让JavaScript 点击处理程序将ID 传递给模式。

【讨论】：

id 属性是有道理的。我知道有很多问题要问，但我还没有学过 JS，你能提供一个例子来说明我将如何改变我的脚本，以便我可以放弃使用 id 吗？这是一个直接从 Materialise 中提取的示例。

【解决方案2】：

感谢@chrylis 引导我走上正确的道路。这是我的解决方案。

                            <a class="waves-effect waves-light btn btn-flat btn-delete view" th:onclick="'$(\'#row-' + ${page.id} + '\').modal(\'open\');'">delete</a>
                        <!-- Modal Structure -->
                        <div th:id="'row-' + ${page.id}" class="modal">
                            <div class="modal-content center">
                                <h4 style="color: darkred">Are you sure?</h4>
                                <p th:text="'Confirm that you want to delete this page: ' + ${page.name}" style="color: darkred"></p>
                            </div>
                            <div class="modal-footer">
                                <a href="#" class=" modal-action modal-close waves-effect waves-green btn-flat">CANCEL</a>
                                <a th:href="'/page-delete-' + ${page.id}" class=" modal-action modal-close waves-effect waves-red btn-flat">DELETE</a>
                            </div>
                        </div>

                        <!-- Modal Trigger -->

                        <script th:inline="javascript">
                            /*<![CDATA[*/

                            $(document).ready(function() {
                                $(/*[['#row-' + ${page.id}]]*/).modal();
                            });

                            /*]]>*/
                        </script>

【讨论】：

作为建议，如果您坚持使用id（而不是data-row-id），最好使用前缀（'row-' + page.id）来避免冲突。