Thymeleaf th:每个带有嵌套div的循环返回错误的对象

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传递给模态。

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