th:each内部进行条件判断来更改样式

最新推荐文章于 2022-04-20 19:54:50 发布

小馒头味豆浆

最新推荐文章于 2022-04-20 19:54:50 发布

阅读量6.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： thymeleaf

本文链接：https://blog.youkuaiyun.com/qq_43639296/article/details/85830755

thymeleaf 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Thymeleaf中使用th:each遍历集合，并通过条件判断更改元素样式，实现每隔两个元素自动换行的效果。

th:each内部进行条件判断来更改样式

需求 : 遍历集合并每隔两个换行

<div>
    <input type="checkbox"
           th:each ="p,pIndex:${pList}"
           th:utext ="${pIndex.index%2==0?p.name:'p.name+'&lt;/br&gt;'}"
</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小馒头味豆浆

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决Thymeleaf 中 th:if、th:each、th:href、th:onclick、th:src等问题亲测

那杯热咖啡

08-10

5410

最近使用若依，对前端的thymeleaf语法不是很熟悉，下面是自己的笔记，大神请忽略。一、th:if gt: great than（大于）> ge： great equal（大于等于）>= eq： equal（等于）== lt： less than（小于）< le： less equal（小于等于）<= ne： not equal（不等于）!= 写法如下，其它写法类似。 <div th:if="${substringNam...

thymeleaf循环下标倍数判断

前往JAVA架构的路上

07-27

8148

问题描述实际开发过程中会遇到每几个倍数的css样式不一样，那么怎么利用thymeleaf来判断实现呢？解决方案模拟数据 List<String> list=new ArrayList<String>(); list.add("1s"); list.add("2s"); list.add("3s"); list.add("4s");

参与评论您还未登录，请先登录后发表或查看评论

4）Thymeleaf th:each 循环迭代与 th:if、th:switch 条件判断

热门推荐

蚩尤后裔-汪茂雄

12-02

10万+

目录 th:each 循环迭代循环基本用法获取迭代状态 条件判断 th:if th:unless th:switch th:each 循环迭代循环基本用法 1、对于信息页面，数据格式是一样时，页面通常都是循环迭代它们，写过 JSP 的 JSTL 的就知道，JSTL 有一个<c:foreach>，同理 Thymeleaf 也有一个 th:each。作用都是一...

thymeleaf常用属性--包括th:each,条件判断和th:inline

weixin_52188717的博客

05-27

451

1.基础属性 <body> <h1>text属性：</h1> <h1 th:text="${lff.name}"></h1><br> <p>href属性：</p> <a th:href="@{/href}">查看</a><br> <p>action属性</p> <form th:action="@{/action}" th:method="po

thymeleaf生成动态复选框并获取选中值

海马有力量的博客

02-28

2912

后端controller层把数据放到model中，前端动态生成复选框： <div class="layui-input-block"> <input name="students" type="checkbox" th:each ="student:${studentList}" th:value="${student.id}" th:title="${student.name}" th:attr ="checked=${stude

thymeleaf模板中使用th：each会导致样式失效错乱问题

zongmaomx的博客

03-07

2156

问题：在spring boot项目中使用th:each来遍历数据，结果出来的样式与之前手动填充数据的样式不同。正确样式：正确代码： <dl class="fly-panel-main"> <dd th:each="friendLinks:${friendLink}"> <a th:href="${friendLinks.link}...

th:each

gm371200587的博客

05-04

4180

循环加判断：做权限时，菜单动态展示，所以前台的样式中进入默认选中没了，所以想取下标做判断，这里通过 iterStat.index 取得下标，判断完美解决<li th:each="permissions,iterStat:${permissions}" > <a th:attr="data-href=@{${permissions.action...

Thymeleaf th:each遍历，th:if、th:switch 条件判断，input，select，radio 回显赋值

上班搞IT，下班搞ITF。

12-12

4814

1. th:each 遍历  <tr th:each="user : ${userList}">  <td th:text="${user.u...

元素的each,动态检查选择内容（对一些checkbox的检查）

老白干的zone

02-14

643

$(function () { $("input").click(function () { var arr = new Array(); $("input:checked").each(function (key, value) { arr[key] = $(value).val(); });//遍历选中元素对象数组往arr中灌值 $("#content").te

java th标签,Thymeleaf中th:each及th:if使用方法解析

weixin_39744894的博客

03-13

1282

一、th:each作用：用于遍历controller层发送过来的集合。例：Controller代码：?下面我们通过th:each属性在html页面将其遍历显示出来?讲解：th:each="user:${users}"其中${users}是将取出名为users的List集合，每次遍历取出List集合中的一个元素赋值给user注意：th:each每次遍历都会生成一个包含它的标签，如我们举的这个例子，u...

th:each迭代循环语法及属性介绍

W888686868的博客

04-20

3006

th:each属性用于迭代循环，语法：th:each="obj,iterStat:${objList}" 迭代对象可以是java.util.List,java.util.Map,数组等; iterStat称作状态变量，属性有： index当前迭代对象的index（从0开始计算） count 当前迭代对象的index(从1开始计算) size:被迭代对象的大小 current当前迭代变量 even/odd布尔值，当前循环是否是偶数/奇数（从0开始计算） first:布尔值，当前循环是否是第一个 last:

thymeleaf的th:each常见用法

weixin_34417183的博客

08-20

4574

thymeleaf的th:each常见用法一.th:eath迭代集合用法: <table border="1" id="stuTable"> <tr> <td>是否选中</td> <td>编号</td&...

thymeleaf 如何用th:each 做条件遍历

java_zdc的博客

04-19

3497

thymeleaf 动态生成表格-换行问题-每隔n列换一行——新方式

薛定谔的雄猫

05-22

3691

用到的标签和函数 numbers.sequence(from,to)函数生成一个从from到to的序列； th:with 定义局部变量，可以配合td:block标签使用，也可以定义在其他标签之内； th:block 功能标签，标签本身不会输出为一个html元素，只是用来做取值或者循环等功能性用途。 th:each 用于遍历数组的标签。具体说明详见 thymeleaf 动态生成表格 th:if 用做逻辑半段，满足条件则输出html,不满足则不输出。示例代码通过userList数组生成一个表格，表格的每一

foreach 循环3列自动换行

suqingdi的专栏

10-21

4630

${g.name }

thymeleaf 动态生成表格-换行问题-每隔n列换一行

薛定谔的雄猫

07-30

5521

thymeleaf 动态生成表格，比如每隔5列换一行（增加一个对） th:remove标签：如果值为tag则删除当前标签（子标签不删除），当然还有其他值…。 th:utext标签：可以输出非文本（即HTML元素）内容 <table cellpadding="0" cellspacing="0" border="1"> <th:block th:each="usr,stat...

<tr th:each="folder : ${folders}"> <td style="display: flex;" > <span > <form th:action="@{/show}" method="post"> <input type="hidden" name="objectName" th:value="${folder.getFolderId}"> <input type="hidden" name="objectPath" th:value="${folder.getFolderPath}"> <input type="hidden" name="objectName" th:value="${folder.getFolderName}"> <input type="image" src="/img/查看.jpg" width="150" height="150" th:title="打开文件"></br> </form> </br><p name="objectName" th:text="${folder.getFolderName}"> </span> </td> </tr> </table>怎么在一行显示

05-25

可以将每个文件夹的信息放在一个 `<div>` 中，通过设置该 `<div>` 的样式 `display: inline-block;` 将它们在一行内显示。修改代码如下： ``` <tr th:each="folder : ${folders}"> <td> <div style="display: inline-block;"> <form th:action="@{/show}" method="post"> <input type="hidden" name="objectName" th:value="${folder.getFolderId}"> <input type="hidden" name="objectPath" th:value="${folder.getFolderPath}"> <input type="hidden" name="objectName" th:value="${folder.getFolderName}"> <input type="image" src="/img/查看.jpg" width="150" height="150" th:title="打开文件"></br> </form> </br><p name="objectName" th:text="${folder.getFolderName}"> </div> </td> </tr> ``` 注意，这里将 `<span>` 标签替换为了 `<div>` 标签，并且添加了样式 `display: inline-block;`。