javascript
jquer each 遍历的结果不显示 null_SpringBoot系列（三十一）- Thymeleaf如何用th:each 做条件遍历
步驟1:基于前面的知識點步驟2:先運行，看到效果，再學習步驟3:模仿和排錯步驟4:TestController步驟5:普通遍歷步驟6:帶狀態的遍歷步驟7:結合 select步驟8:結合 單選框步驟9:完整的 test.html步驟10:重啟測試
步驟 1 : 基于前面的知識點
本知識點是建立在上一個知識點可運行項目的基礎上進行的改進,所以最好把上個知識點理解和消化了.步驟 2 : 先運行，看到效果，再學習
老規矩，先下載下載區(點擊進入)的可運行項目，配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。
運行Application.java 然后訪問如下測試地址：http://127.0.0.1:8080/thymeleaf/test
可以看到如圖所示的集中常見遍歷需求
1. 單純表格
2. 取status值的表格
3. 下拉框
4. 單選框
步驟 3 : 模仿和排錯
在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。
模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較正確答案 ( 可運行項目 ) 和自己的代碼，來定位問題所在。
采用這種方式，學習有效果，排錯有效率，可以較為明顯地提升學習速度，跨過學習路上的各個檻。
推薦使用diffmerge軟件，進行文件夾比較。把你自己做的項目文件夾，和我的可運行項目文件夾進行比較。
這個軟件很牛逼的，可以知道文件夾里哪兩個文件不對，并且很明顯地標記出來
這里提供了綠色安裝和使用教程：diffmerge 下載和使用教程步驟 4 : TestController
準備集合 List<Product> 用于視圖上顯示。
需要注意的是 第5個產品用的是 currentProductpackage com.how2java.springboot.web;import java.util.ArrayList;import java.util.List;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import com.how2java.springboot.pojo.Product;@Controllerpublic class TestController {@RequestMapping("/test")public String test(Model m) {String htmlContent = "<p style='color:red'> 紅色文字</p>";Product currentProduct =new Product(5,"product e", 200);boolean testBoolean = true;List<Product> ps = new ArrayList<>();ps.add(new Product(1,"product a", 50));ps.add(new Product(2,"product b", 100));ps.add(new Product(3,"product c", 150));ps.add(new Product(4,"product d", 200));ps.add(currentProduct);ps.add(new Product(6,"product f", 200));ps.add(new Product(7,"product g", 200)); m.addAttribute("ps", ps);m.addAttribute("htmlContent", htmlContent);m.addAttribute("currentProduct", currentProduct);m.addAttribute("testBoolean", testBoolean);return "test";}}步驟 5 : 普通遍歷
使用 th:each 遍歷
<div class="showing"><h2>遍歷</h2><table><thead><tr><th>id</th><th>產品名稱</th><th>價格</th></tr></thead><tbody><tr th:each="p: ${ps}"><td th:text="${p.id}"></td><td th:text="${p.name}"></td><td th:text="${p.price}"></td></tr></tbody></table></div>步驟 6 : 帶狀態的遍歷
使用 th:each="p,status: ${ps} 方式遍歷就把狀態放在 status里面了， 同時還用3元表達式判斷奇偶 th:class="${status.even}?'even':'odd'"
status里還包含了如下信息：
index 屬性, 0 開始的索引值
count 屬性, 1 開始的索引值
size 屬性, 集合內元素的總量
current 屬性, 當前的迭代對象
even/odd 屬性, boolean 類型的, 用來判斷是否是偶數個還是奇數個
first 屬性, boolean 類型, 是否是第一個
last 屬性, boolean 類型, 是否是最后一個
<div class="showing"><h2>帶狀態遍歷</h2><table><thead><tr><th>index</th><th>id</th><th>產品名稱</th><th>價格</th></tr></thead><tbody><tr th:class="${status.even}?'even':'odd'" th:each="p,status: ${ps}"><td th:text="${status.index}"></td><td th:text="${p.id}"></td><td th:text="${p.name}"></td><td th:text="${p.price}"></td></tr></tbody></table></div>步驟 7 : 結合 select
還是用 th:each,但是放在option元素上，就可以遍歷出多個下拉框出來了。
其中 th:selected 表示被選中的項。
<div class="showing"><h2>遍歷 select </h2><select size="3"><option th:each="p:${ps}" th:value="${p.id}" th:selected="${p.id==currentProduct.id}" th:text="${p.name}" ></option></select></div>步驟 8 : 結合 單選框
單選框也是同樣的做法，其中 th:checked用于判斷是否選中
<div class="showing"><h2>遍歷 radio </h2><input name="product" type="radio" th:each="p:${ps}" th:value="${p.id}" th:checked="${p.id==currentProduct.id}" th:text="${p.name}" /></div>步驟 9 : 完整的 test.html
完整的 test.html<!DOCTYPE HTML><html xmlns:th="http://www.thymeleaf.org"><head><title>hello</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css"th:href="@{/static/css/style.css}"/><script type="text/javascript" src="../../webapp/static/js/thymeleaf.js"th:src="@{/static/js/thymeleaf.js}"></script><style>h2{text-decoration: underline;font-size:0.9em;color:gray;}</style> </head><body><div class="showing"><h2>遍歷</h2><table><thead><tr><th>id</th><th>產品名稱</th><th>價格</th></tr></thead><tbody><tr th:each="p: ${ps}"><td th:text="${p.id}"></td><td th:text="${p.name}"></td><td th:text="${p.price}"></td></tr></tbody></table></div><div class="showing"><h2>帶狀態遍歷</h2><table><thead><tr><th>index</th><th>id</th><th>產品名稱</th><th>價格</th></tr></thead><tbody><tr th:class="${status.even}?'even':'odd'" th:each="p,status: ${ps}"><td th:text="${status.index}"></td><td th:text="${p.id}"></td><td th:text="${p.name}"></td><td th:text="${p.price}"></td></tr></tbody></table></div><div class="showing"><h2>遍歷 select </h2><select size="3"><option th:each="p:${ps}" th:value="${p.id}" th:selected="${p.id==currentProduct.id}" th:text="${p.name}" ></option></select></div><div class="showing"><h2>遍歷 radio </h2><input name="product" type="radio" th:each="p:${ps}" th:value="${p.id}" th:checked="${p.id==currentProduct.id}" th:text="${p.name}" /></div><div class="showing"><h2>條件判斷</h2><p th:if="${testBoolean}" >如果testBoolean 是 true ，本句話就會顯示</p><p th:if="${not testBoolean}" >取反 ，所以如果testBoolean 是 true ，本句話就不會顯示</p><p th:unless="${testBoolean}" >unless 等同于上一句，所以如果testBoolean 是 true ，本句話就不會顯示</p><p th:text="${testBoolean}?'當testBoolean為真的時候，顯示本句話，這是用三相表達式做的':''" ></p></div><div class="showing"><h2>顯示 轉義和非轉義的 html 文本</h2><p th:text="${htmlContent}" ></p><p th:utext="${htmlContent}" ></p></div><div class="showing"><h2>顯示對象以及對象屬性</h2><p th:text="${currentProduct}" ></p><p th:text="${currentProduct.name}" ></p><p th:text="${currentProduct.getName()}" ></p></div><div class="showing" th:object="${currentProduct}"><h2>*{}方式顯示屬性</h2><p th:text="*{name}" ></p></div><div class="showing"><h2>算數運算</h2><p th:text="${currentProduct.price+999}" ></p></div><div class="showing"><div th:replace="include::footer1" ></div><div th:replace="include::footer2(2015,2018)" ></div></div></body></html>步驟 10 : 重啟測試
重新運行 Application.java, 然后測試http://127.0.0.1:8080/thymeleaf/test
更多內容，點擊了解： https://how2j.cn/k/springboot/springboot-interation/1740.html
總結
以上是生活随笔為你收集整理的jquer each 遍历的结果不显示 null_SpringBoot系列（三十一）- Thymeleaf如何用th:each 做条件遍历的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 油价再上涨 92号汽油进入9元时代：今年
- 下一篇： 主演透露《黑袍纠察队》第三季相当劲爆：血