java - thymeleaf :each loop with nested div returns wrong object

Question

我遇到 Thymeleaf 循环问题，它在嵌套 div 中返回错误的对象。我希望它返回与顺序表行对应的对象，而不是返回循环中的第一个对象。下面发布了代码和注释:

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

如何解决这个问题？

Answer 1

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

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