html - 如何使用 jquery 隐藏或显示来自 th:each 的所有 div？

Question

首先，我很抱歉我的英语不好。

最近我正在使用 Spring Boot 做项目，我正在努力隐藏或显示由 th:each 创建的所有 div

<button class="category" onclick="showBar()">BAR</button>


<div id="barList" th:each="m: ${MERCH}" th:if="${m.cat.catId}==1">
<tr>
    <p th:text="${m.getMName()}"></p><br>
    <p th:text="${#numbers.formatInteger(m.price, 1, 'COMMA')}"></p>
</tr>
</div>


<script>
function showBar() {
    $('#barList').hide();
}
</script>

这是我正在努力解决的 HTML 的一部分

我在 chrome 中的 devtool 上看到的是，第一个 div 似乎可以工作（style="display : none;" 已创建）但其他 div 出现后根本不起作用。

如何隐藏或显示从 th:each 出来的所有 div... TT

即使它不使用JQuery，也没关系。我只想隐藏所有。

再次为我的英语不好感到抱歉..希望你能理解..谢谢！

标签： htmljqueryspringspring-boot